Add VSF card list layout page with company cards
This commit is contained in:
@@ -63,6 +63,7 @@
|
|||||||
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
|
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
|
||||||
<ul class="sg-index-list">
|
<ul class="sg-index-list">
|
||||||
<li><a href="./patterns/company-card.html">Company Card</a></li>
|
<li><a href="./patterns/company-card.html">Company Card</a></li>
|
||||||
|
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,625 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Styleguide – VSF Card Listen Seite</title>
|
||||||
|
<link rel="stylesheet" href="../styleguide.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="sg-main-heading">Layout – VSF Card Listen Seite</h1>
|
||||||
|
|
||||||
|
<section class="sg-card-list-page" aria-label="VSF Card Listen Seite">
|
||||||
|
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
|
||||||
|
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
|
||||||
|
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
|
||||||
|
|
||||||
|
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||||
|
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||||
|
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||||
|
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||||
|
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Titel</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Listen</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||||
|
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||||
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||||
|
Sortierung
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||||
|
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||||
|
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||||
|
Region
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||||
|
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||||
|
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-search-field-row">
|
||||||
|
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||||
|
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">
|
||||||
|
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||||
|
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||||
|
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||||
|
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||||
|
</span>
|
||||||
|
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||||
|
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||||
|
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||||
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-list-page__title-row">
|
||||||
|
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF Listenübersicht</h1>
|
||||||
|
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
|
||||||
|
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur VSF Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
|
||||||
|
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||||
|
Hilfe zur Listenansicht und zu den Filteroptionen.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur VSF Listenübersicht">
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||||
|
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Company Liste">
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card Netflix, Inc.">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
|
||||||
|
<div class="sg-strong">Netflix, Inc.</div>
|
||||||
|
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||||
|
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||||
|
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||||
|
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||||
|
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||||
|
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
|
||||||
|
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
|
||||||
|
<table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
|
||||||
|
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
|
||||||
|
<td data-component-part="data-columns-reference-cell"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
|
||||||
|
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
|
||||||
|
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Marktbewertung:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Wachstum:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||||
|
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Profitabilität:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||||||
|
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-bar-label sg-company-card__moat">Moat: <span class="sg-company-card__moat-neutral">Maessig</span></p>
|
||||||
|
<p class="sg-body sg-company-card__summary">Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs.</p>
|
||||||
|
</div>
|
||||||
|
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions">
|
||||||
|
<div class="sg-object-card__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card SAP SE">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"><div class="sg-strong">SAP SE</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score"><div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list"><div class="sg-score-bar-item" data-component="score-bar"><p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p><div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"><div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div><div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div></div><p class="sg-bar-label" data-component-part="score-state">neutral</p></div></div></div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns"><table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns"><tbody><tr><td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">30.2</span></td><td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value">24.1</span></td></tr><tr><td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value">2.10</span></td><td data-component-part="data-columns-reference-cell"></td></tr></tbody></table></div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"><p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p><p class="sg-body sg-company-card__summary">Solides Wachstum mit hoher Planbarkeit, Bewertung leicht über Median.</p></div>
|
||||||
|
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions"><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer>
|
||||||
|
</article>
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card Novo Nordisk A/S"><header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"><div class="sg-strong">Novo Nordisk A/S</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score"><div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list"><div class="sg-score-bar-item" data-component="score-bar"><p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p><div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"><div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w82" data-component-part="score-value" data-component-state="positive"></div><div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div></div><p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p></div></div></div><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns"><table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns"><tbody><tr><td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">27.1</span></td><td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value">21.6</span></td></tr><tr><td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value">1.76</span></td><td data-component-part="data-columns-reference-cell"></td></tr></tbody></table></div><div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"><p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p><p class="sg-body sg-company-card__summary">Hohe Kapitalrenditen und robuste Nachfrage, mit regulatorischem Risiko.</p></div><footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions"><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer></article>
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card Microsoft Corp."><header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"><div class="sg-strong">Microsoft Corp.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score"><div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list"><div class="sg-score-bar-item" data-component="score-bar"><p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p><div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"><div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w88" data-component-part="score-value" data-component-state="positive"></div><div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div></div><p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p></div></div></div><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns"><table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns"><tbody><tr><td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">34.5</span></td><td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value">29.8</span></td></tr><tr><td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value">2.34</span></td><td data-component-part="data-columns-reference-cell"></td></tr></tbody></table></div><div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"><p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p><p class="sg-body sg-company-card__summary">Breite Cashflow-Basis mit KI-getriebenem Wachstum und hoher Visibilität.</p></div><footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions"><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer></article>
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card LVMH"><header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"><div class="sg-strong">LVMH</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score"><div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list"><div class="sg-score-bar-item" data-component="score-bar"><p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p><div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"><div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w58" data-component-part="score-value" data-component-state="neutral"></div><div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div></div><p class="sg-bar-label" data-component-part="score-state">neutral</p></div></div></div><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns"><table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns"><tbody><tr><td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">26.8</span></td><td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value">23.7</span></td></tr><tr><td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value">2.55</span></td><td data-component-part="data-columns-reference-cell"></td></tr></tbody></table></div><div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"><p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p><p class="sg-body sg-company-card__summary">Premium-Markenstärke mit zyklischer Exponierung im Konsumsegment.</p></div><footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions"><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer></article>
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card ASML Holding"><header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"><div class="sg-strong">ASML Holding</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score"><div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list"><div class="sg-score-bar-item" data-component="score-bar"><p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p><div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"><div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w90" data-component-part="score-value" data-component-state="positive"></div><div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div></div><p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p></div></div></div><div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns"><table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns"><tbody><tr><td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">36.2</span></td><td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value">30.4</span></td></tr><tr><td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value">2.89</span></td><td data-component-part="data-columns-reference-cell"></td></tr></tbody></table></div><div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"><p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p><p class="sg-body sg-company-card__summary">Technologischer Burggraben mit hoher Nachfrage- und Investitionsabhängigkeit.</p></div><footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="company-card-actions"><div class="sg-object-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button></div></footer></article>
|
||||||
|
</div>
|
||||||
|
<div class="sg-navigation-card-layout sg-card-list-page__navigation">
|
||||||
|
<div class="sg-navigation-card-block">
|
||||||
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
|
<div class="sg-navigation-card-center">
|
||||||
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">mehr laden</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="sg-card-list-page-drawer" aria-label="Fundamentalanalyse" aria-hidden="true" data-open="false">
|
||||||
|
<div class="sg-card-list-page-drawer__content">
|
||||||
|
<div class="sg-navigation-card-layout">
|
||||||
|
<div class="sg-navigation-card-block">
|
||||||
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen oben">
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
|
<div class="sg-navigation-card-center">
|
||||||
|
<button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe">
|
||||||
|
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 1</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||||
|
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 2</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||||
|
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||||
|
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-navigation-card-layout">
|
||||||
|
<div class="sg-navigation-card-block">
|
||||||
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen unten">
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
|
<div class="sg-navigation-card-center">
|
||||||
|
<button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const updateObjectCardGridRowState = () => {
|
||||||
|
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||||
|
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||||||
|
grid.classList.remove('sg-object-card-grid--multi-row');
|
||||||
|
grid.style.removeProperty('--layout-object-card-shared-width');
|
||||||
|
|
||||||
|
if (cards.length <= 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstTop = cards[0].offsetTop;
|
||||||
|
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||||||
|
|
||||||
|
if (!hasMultipleRows) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||||||
|
const referenceCard = firstRowCards[0];
|
||||||
|
if (!referenceCard) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||||||
|
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||||||
|
grid.classList.add('sg-object-card-grid--multi-row');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
|
||||||
|
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||||
|
const isActive = otherButton === button;
|
||||||
|
otherButton.setAttribute('aria-selected', String(isActive));
|
||||||
|
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-sandwich-button');
|
||||||
|
if (!button) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = wrap.dataset.open !== 'true';
|
||||||
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||||||
|
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||||||
|
otherWrap.dataset.open = 'false';
|
||||||
|
if (otherButton) {
|
||||||
|
otherButton.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wrap.dataset.open = String(nextState);
|
||||||
|
button.setAttribute('aria-expanded', String(nextState));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||||||
|
toggle.dataset.active = nextState;
|
||||||
|
toggle.dataset.componentState = nextState;
|
||||||
|
toggle.setAttribute(
|
||||||
|
'aria-label',
|
||||||
|
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePulldownSelectionState = (demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||||
|
|
||||||
|
if (!trigger || selectableOptions.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||||
|
return option.getAttribute('aria-checked') === 'true';
|
||||||
|
}).length;
|
||||||
|
|
||||||
|
selectableOptions.forEach((option) => {
|
||||||
|
const optionRow = option.closest('.sg-pulldown-option');
|
||||||
|
if (!optionRow) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
optionRow.classList.toggle(
|
||||||
|
'sg-pulldown-option--selected',
|
||||||
|
option.getAttribute('aria-checked') === 'true'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||||
|
|
||||||
|
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||||||
|
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||||||
|
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||||||
|
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||||
|
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||||
|
trigger.setAttribute(
|
||||||
|
'aria-label',
|
||||||
|
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
|
||||||
|
if (!trigger) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
trigger.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = demo.dataset.open !== 'true';
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||||
|
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
otherDemo.dataset.open = 'false';
|
||||||
|
if (otherTrigger) {
|
||||||
|
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-help-icon');
|
||||||
|
wrap.dataset.open = 'false';
|
||||||
|
if (button) {
|
||||||
|
button.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
demo.dataset.align = 'left';
|
||||||
|
demo.dataset.open = String(nextState);
|
||||||
|
trigger.setAttribute('aria-expanded', String(nextState));
|
||||||
|
|
||||||
|
if (!nextState) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||||
|
if (!panel) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const panelRect = panel.getBoundingClientRect();
|
||||||
|
if (panelRect.right > window.innerWidth) {
|
||||||
|
demo.dataset.align = 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
const alignedPanelRect = panel.getBoundingClientRect();
|
||||||
|
if (alignedPanelRect.left < 0) {
|
||||||
|
demo.dataset.align = 'left';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||||||
|
option.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||||||
|
if (pulldownDemo) {
|
||||||
|
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||||
|
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePulldownSelectionState(pulldownDemo);
|
||||||
|
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
pulldownDemo.dataset.open = 'false';
|
||||||
|
if (trigger) {
|
||||||
|
trigger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-help-icon');
|
||||||
|
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||||
|
|
||||||
|
if (!button || !panel) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = wrap.dataset.open !== 'true';
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
|
||||||
|
const otherButton = otherWrap.querySelector('.sg-help-icon');
|
||||||
|
otherWrap.dataset.open = 'false';
|
||||||
|
if (otherButton) {
|
||||||
|
otherButton.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
demo.dataset.open = 'false';
|
||||||
|
if (trigger) {
|
||||||
|
trigger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wrap.dataset.align = 'left';
|
||||||
|
wrap.dataset.open = String(nextState);
|
||||||
|
button.setAttribute('aria-expanded', String(nextState));
|
||||||
|
|
||||||
|
if (!nextState) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const panelRect = panel.getBoundingClientRect();
|
||||||
|
if (panelRect.right > window.innerWidth) {
|
||||||
|
wrap.dataset.align = 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
const alignedPanelRect = panel.getBoundingClientRect();
|
||||||
|
if (alignedPanelRect.left < 0) {
|
||||||
|
wrap.dataset.align = 'left';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||||||
|
const input = wrap.querySelector('.sg-input-single-line');
|
||||||
|
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||||||
|
|
||||||
|
if (!input || !clearButton) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateState = () => {
|
||||||
|
wrap.dataset.hasValue = String(input.value.length > 0);
|
||||||
|
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||||||
|
};
|
||||||
|
|
||||||
|
input.addEventListener('input', updateState);
|
||||||
|
|
||||||
|
clearButton.addEventListener('click', () => {
|
||||||
|
input.value = '';
|
||||||
|
updateState();
|
||||||
|
input.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
updateState();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
|
||||||
|
const fundamentalDrawerCloseButtons = document.querySelectorAll('[data-drawer-close]');
|
||||||
|
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||||||
|
|
||||||
|
const setFundamentalDrawerState = (open) => {
|
||||||
|
if (!fundamentalDrawer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fundamentalDrawer.dataset.open = String(open);
|
||||||
|
fundamentalDrawer.setAttribute('aria-hidden', String(!open));
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-object-card__action').forEach((button) => {
|
||||||
|
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.dataset.drawerOpenTrigger = 'true';
|
||||||
|
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
if (mobileBreakpoint.matches) {
|
||||||
|
window.location.href = './card-listen-fundamentalanalyse-mobile.html';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFundamentalDrawerState(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fundamentalDrawerCloseButtons.forEach((closeButton) => {
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
setFundamentalDrawerState(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
setFundamentalDrawerState(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
if (
|
||||||
|
fundamentalDrawer &&
|
||||||
|
fundamentalDrawer.dataset.open === 'true' &&
|
||||||
|
!event.target.closest('.sg-card-list-page-drawer') &&
|
||||||
|
!event.target.closest('[data-drawer-open-trigger="true"]')
|
||||||
|
) {
|
||||||
|
setFundamentalDrawerState(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||||
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-sandwich-button');
|
||||||
|
wrap.dataset.open = 'false';
|
||||||
|
if (button) {
|
||||||
|
button.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!event.target.closest('.sg-help-icon-wrap') && !event.target.closest('.sg-pulldown-demo')) {
|
||||||
|
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||||
|
const button = wrap.querySelector('.sg-help-icon');
|
||||||
|
wrap.dataset.open = 'false';
|
||||||
|
if (button) {
|
||||||
|
button.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||||
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
|
demo.dataset.open = 'false';
|
||||||
|
if (trigger) {
|
||||||
|
trigger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('load', updateObjectCardGridRowState);
|
||||||
|
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user