Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1,243 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Card Gruppe mit Tastennavigation</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Card Gruppe mit Tastennavigation</h1>
|
||||
<section id="pattern-card-gruppe-mit-tastennavigation">
|
||||
<p class="sg-preview-label">Pattern: Card Gruppe mit Tastennavigation</p>
|
||||
|
||||
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
|
||||
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Tasten Navigation" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="content-block-card-1" id="content-block-tab-1" data-component-part="tab-button">Taste 1</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-2" id="content-block-tab-2" data-component-part="tab-button">Taste 2</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-3" id="content-block-tab-3" data-component-part="tab-button">Taste 3</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-4" id="content-block-tab-4" data-component-part="tab-button">Taste 4</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-5" id="content-block-tab-5" data-component-part="tab-button">Taste 5</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-6" id="content-block-tab-6" data-component-part="tab-button">Taste 6</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-7" id="content-block-tab-7" data-component-part="tab-button">Taste 7</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panels">
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-1" role="tabpanel" aria-labelledby="content-block-tab-1">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 1">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 2">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 3">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3.3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-4" role="tabpanel" aria-labelledby="content-block-tab-4" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 4">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 4.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 4.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 4.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-5" role="tabpanel" aria-labelledby="content-block-tab-5" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 5">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 5.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 5.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 5.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-6" role="tabpanel" aria-labelledby="content-block-tab-6" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 6">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 6.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 6.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 6.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panel" id="content-block-card-7" role="tabpanel" aria-labelledby="content-block-tab-7" hidden>
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 7">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 7.1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 7.1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Inhalt für Taste 7.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
|
||||
|
||||
if (tabGroup) {
|
||||
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
|
||||
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
|
||||
const tabList = tabGroup.querySelector('[role="tablist"]');
|
||||
|
||||
const applyMobileBalancedTabRows = () => {
|
||||
if (!tabList) {
|
||||
return;
|
||||
}
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.style.removeProperty('--sg-tab-mobile-row-slots');
|
||||
});
|
||||
|
||||
if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxItemsPerRow = 3;
|
||||
const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
|
||||
const baseRowSize = Math.floor(tabs.length / rowCount);
|
||||
const rowRemainder = tabs.length % rowCount;
|
||||
let tabStartIndex = 0;
|
||||
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
|
||||
const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
|
||||
for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
|
||||
const tab = tabs[tabStartIndex + itemOffset];
|
||||
if (tab) {
|
||||
tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
|
||||
}
|
||||
}
|
||||
tabStartIndex += rowSize;
|
||||
}
|
||||
};
|
||||
|
||||
const activateTab = (targetTab) => {
|
||||
tabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||||
});
|
||||
|
||||
panels.forEach((panel) => {
|
||||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||||
});
|
||||
};
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => {
|
||||
activateTab(tab);
|
||||
});
|
||||
|
||||
tab.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
const direction = event.key === 'ArrowRight' ? 1 : -1;
|
||||
const nextIndex = (index + direction + tabs.length) % tabs.length;
|
||||
const nextTab = tabs[nextIndex];
|
||||
nextTab.focus();
|
||||
activateTab(nextTab);
|
||||
});
|
||||
});
|
||||
|
||||
applyMobileBalancedTabRows();
|
||||
window.addEventListener('resize', applyMobileBalancedTabRows);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Card Listen Seite Fundamentalanalyse Mobile</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Fundamentalanalyse Mobile</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="Fundamentalanalyse Seite mobil">
|
||||
<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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
||||
<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 mobil">
|
||||
<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 mobil">
|
||||
<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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,162 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Layout Company Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Company Card</h1>
|
||||
<section id="layout-company-card">
|
||||
<p class="sg-preview-label">Layout: Company Card</p>
|
||||
<p class="sg-body">Dieses Layout basiert auf der Object Card und zeigt initial eine einzelne Company Card Instanz.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Content Cards Group</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Content Cards Group</h1>
|
||||
<section id="pattern-content-cards-group">
|
||||
<p class="sg-preview-label">Pattern: Content Cards Group</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Gruppe aus Content Cards">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 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.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 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.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 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.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Overlay Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern - Overlay Card</h1>
|
||||
|
||||
<section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
|
||||
<p class="sg-preview-label">Pattern: Overlay Card</p>
|
||||
|
||||
<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
|
||||
<div class="sg-strong">Alcon 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" href="#!" data-overlay-open-dialog="delete">Objekt löschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content">
|
||||
<p class="sg-body">Objekt-Inhalt der Card. Während das Löschfenster sichtbar ist, wird dieses Objekt um 50% ausgegraut.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment">
|
||||
<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-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title"><strong>Möchtest du Alcon Inc. wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="DELETE"
|
||||
aria-label="Löschbestätigung durch DELETE"
|
||||
data-delete-confirmation-input
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button
|
||||
class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
|
||||
type="button"
|
||||
disabled
|
||||
aria-disabled="true"
|
||||
data-delete-confirmation-submit
|
||||
data-overlay-dialog-close
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const confirmationInput = document.querySelector('[data-delete-confirmation-input]');
|
||||
const confirmationSubmitButton = document.querySelector('[data-delete-confirmation-submit]');
|
||||
|
||||
if (confirmationInput && confirmationSubmitButton) {
|
||||
const updateDeleteConfirmationState = () => {
|
||||
const isValid = confirmationInput.value === 'DELETE';
|
||||
|
||||
confirmationSubmitButton.disabled = !isValid;
|
||||
confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
confirmationInput.addEventListener('input', updateDeleteConfirmationState);
|
||||
updateDeleteConfirmationState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Formular mit Abschnitten</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Formular mit Abschnitten</h1>
|
||||
<section id="pattern-formular-mit-abschnitten">
|
||||
<p class="sg-preview-label">Pattern: Formular mit Abschnitten</p>
|
||||
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||
<form class="sg-form-sections-card" action="#" method="post">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<h2 class="sg-strong sg-form-sections-card__title">Formular</h2>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-1">
|
||||
<h2 id="form-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Persoenliche Auswahl</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte waehlen Sie Ihre bevorzugte Kontaktart fuer die Rueckmeldung.</p>
|
||||
|
||||
<div class="sg-form-sections-card__option-group" role="radiogroup" aria-label="Kontaktart">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Kontakt per E-Mail">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>E-Mail</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Kontakt per Telefon">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Telefon</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-2">
|
||||
<h2 id="form-kapitel-2" class="sg-strong sg-form-sections-card__chapter-title">Optionale Angaben</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte markieren Sie die zusaetzlichen Informationen, die wir beruecksichtigen sollen.</p>
|
||||
|
||||
<div class="sg-form-sections-card__option-group" aria-label="Zusatzoptionen">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Newsletter abonnieren">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Newsletter abonnieren</span>
|
||||
</label>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Rueckruf am Vormittag erlauben">
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Rueckruf am Vormittag erlauben</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="form-kapitel-3">
|
||||
<h2 id="form-kapitel-3" class="sg-strong sg-form-sections-card__chapter-title">Freitext und Details</h2>
|
||||
|
||||
<p class="sg-body sg-form-sections-card__sentence">Bitte erfassen Sie einen kurzen Betreff und eine genauere Beschreibung Ihres Anliegens.</p>
|
||||
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Betreff</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Betreff eingeben"
|
||||
aria-label="Betreff"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Nachricht</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="3"
|
||||
placeholder="Nachricht eingeben"
|
||||
aria-label="Nachricht"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Prozess Button</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const formCard = document.querySelector('.sg-form-sections-card');
|
||||
if (!formCard) {
|
||||
return;
|
||||
}
|
||||
const processButton = formCard.querySelector('.sg-button--process');
|
||||
if (!processButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateProcessButtonState = () => {
|
||||
const hasCheckedOption = Array.from(formCard.querySelectorAll('[role="radio"], [role="checkbox"]'))
|
||||
.some((field) => field.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(formCard.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasCheckedOption || hasTextInput;
|
||||
|
||||
processButton.disabled = !isActive;
|
||||
processButton.setAttribute('aria-disabled', String(!isActive));
|
||||
processButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
formCard.querySelectorAll('[role="radiogroup"]').forEach((group) => {
|
||||
group.querySelectorAll('[data-component="radio-field"]').forEach((option) => {
|
||||
option.addEventListener('click', () => {
|
||||
const selectedRadio = option.querySelector('.sg-radio-field');
|
||||
if (!selectedRadio || selectedRadio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
group.querySelectorAll('[data-component="radio-field"]').forEach((otherOption) => {
|
||||
const otherRadio = otherOption.querySelector('.sg-radio-field');
|
||||
if (!otherRadio) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isSelected = otherRadio === selectedRadio;
|
||||
otherRadio.setAttribute('aria-checked', String(isSelected));
|
||||
otherRadio.classList.toggle('sg-form-active', isSelected);
|
||||
otherRadio.classList.toggle('sg-radio-field--inactive-selectable', !isSelected);
|
||||
otherOption.setAttribute('data-component-state', isSelected ? 'active' : 'inactive-selectable');
|
||||
});
|
||||
|
||||
updateProcessButtonState();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
formCard.querySelectorAll('[data-component="checkbox-field"]').forEach((option) => {
|
||||
option.addEventListener('click', () => {
|
||||
const checkbox = option.querySelector('.sg-checkbox-field');
|
||||
if (!checkbox || checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
checkbox.classList.toggle('sg-form-active', nextState);
|
||||
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
|
||||
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
|
||||
updateProcessButtonState();
|
||||
});
|
||||
});
|
||||
|
||||
formCard.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateProcessButtonState);
|
||||
});
|
||||
|
||||
updateProcessButtonState();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,602 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Multiselektions-Pulldown</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Multiselektions-Pulldown</h1>
|
||||
<section id="pattern-multiselektions-pulldown">
|
||||
<p class="sg-preview-label">Pattern: Multiselektions-Pulldown</p>
|
||||
|
||||
<div class="sg-options-row" aria-label="Multiselektions-Pulldown Wrapper" data-pattern="multiselektions-pulldown">
|
||||
<div class="sg-options-row__left" data-pattern-part="multiselektions-pulldown-trigger-area">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="active" data-force-active="true">
|
||||
<span class="sg-activatable-control">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Multiselektions-Pulldown mit aktiver Auswahl" data-label-base="Multiselektions-Pulldown" data-component-part="pulldown-trigger">
|
||||
Multiselektions-Pulldown
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Multiselektions-Pulldown" data-component-part="pulldown-panel">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Multiselektions-Inhalt">
|
||||
<form class="sg-form-sections-card" action="#" method="post">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-1">
|
||||
<h2 id="multiselect-block-1" class="sg-strong sg-form-sections-card__chapter-title">Block 1</h2>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 1 wählen" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 1</span>
|
||||
</label>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-1-label">Slider 1</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-1-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-2-label">Slider 2</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="9.5"
|
||||
aria-labelledby="multiselect-slider-2-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">9.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-3-label">Slider 3</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="5.0"
|
||||
aria-labelledby="multiselect-slider-3-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">5.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-4-label">Slider 4</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-4-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2">
|
||||
<h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-5-label">Slider 5</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="3.0"
|
||||
aria-labelledby="multiselect-slider-5-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">3.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-6-label">Slider 6</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="2.5"
|
||||
aria-labelledby="multiselect-slider-6-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">2.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-7-label">Slider 7</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="1.6"
|
||||
aria-labelledby="multiselect-slider-7-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">1.6</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-3">
|
||||
<h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
|
||||
|
||||
<div id="component-radio-activatable" class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Radio Auswahl: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-radio-group-label">Radio Auswahl</span>
|
||||
<span class="sg-radio-activatable-group__choices">
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 1</span>
|
||||
</span>
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 2 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 2</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4">
|
||||
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
|
||||
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const setLocalActivationState = (toggle, isActive) => {
|
||||
const sliderRow = toggle.closest('.sg-slider-row[data-activatable="true"]');
|
||||
if (sliderRow) {
|
||||
const slider = sliderRow.querySelector('.sg-slider');
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
|
||||
slider.classList.toggle('sg-form-active', isActive);
|
||||
slider.classList.toggle('sg-form-inactive-selectable', !isActive);
|
||||
slider.disabled = !isActive;
|
||||
return;
|
||||
}
|
||||
|
||||
const radioGroup = toggle.closest('[data-activatable-radio-group="true"]');
|
||||
if (radioGroup) {
|
||||
const radios = radioGroup.querySelectorAll('.sg-radio-field');
|
||||
radioGroup.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
radios.forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
if (!isActive) {
|
||||
radio.setAttribute('aria-checked', 'false');
|
||||
}
|
||||
const checked = radio.getAttribute('aria-checked') === 'true';
|
||||
radio.classList.toggle('sg-form-active', checked);
|
||||
radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const pulldownRow = toggle.closest('[data-pulldown-filter-row]');
|
||||
if (pulldownRow) {
|
||||
const select = pulldownRow.querySelector('.sg-pulldown');
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
pulldownRow.dataset.active = isActive ? 'true' : 'false';
|
||||
select.disabled = !isActive;
|
||||
pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
|
||||
toggle.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
|
||||
const isActive = nextState === 'relative';
|
||||
toggle.dataset.active = nextState;
|
||||
toggle.setAttribute('aria-label', toggle.getAttribute('aria-label').replace(/(an|aus)$/, isActive ? 'an' : 'aus'));
|
||||
setLocalActivationState(toggle, isActive);
|
||||
});
|
||||
});
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
const forceActive = demo.dataset.forceActive === 'true';
|
||||
|
||||
if (!trigger || selectableOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||
return option.getAttribute('aria-checked') === 'true';
|
||||
}).length;
|
||||
|
||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||
trigger.textContent = forceActive
|
||||
? labelBase
|
||||
: (selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase);
|
||||
trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
|
||||
trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
|
||||
trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
|
||||
);
|
||||
};
|
||||
|
||||
const updateMultiselectLabelAlignment = () => {
|
||||
document.querySelectorAll('.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel').forEach((panel) => {
|
||||
const labels = panel.querySelectorAll(
|
||||
'.sg-slider-row[data-activatable="true"] > .sg-label, .sg-radio-activatable-group > .sg-label, [data-pulldown-filter-row] > .sg-pulldown-panel__label'
|
||||
);
|
||||
|
||||
let maxWidth = 0;
|
||||
labels.forEach((label) => {
|
||||
const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width);
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
});
|
||||
|
||||
if (maxWidth > 0) {
|
||||
panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
|
||||
} else {
|
||||
panel.style.removeProperty('--sg-multiselect-label-column-width');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-slider-row').forEach((row) => {
|
||||
const slider = row.querySelector('.sg-slider');
|
||||
const valueOutput = row.querySelector('.sg-slider-value');
|
||||
|
||||
if (!slider || !valueOutput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateSliderState = () => {
|
||||
const min = Number(slider.min || 0);
|
||||
const max = Number(slider.max || 100);
|
||||
const value = Number(slider.value || 0);
|
||||
const denominator = max - min;
|
||||
const progress = denominator > 0 ? ((value - min) / denominator) * 100 : 0;
|
||||
|
||||
slider.style.setProperty('--sg-slider-progress', `${progress}%`);
|
||||
valueOutput.textContent = value.toFixed(1);
|
||||
};
|
||||
|
||||
slider.addEventListener('input', () => {
|
||||
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
|
||||
if (activatableOption) {
|
||||
checkbox.setAttribute('aria-checked', 'true');
|
||||
checkbox.classList.add('sg-form-active');
|
||||
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
|
||||
activatableOption.dataset.componentState = 'active';
|
||||
}
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (radio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
|
||||
if (!activatableGroup) {
|
||||
return;
|
||||
}
|
||||
if (activatableGroup.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
|
||||
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
|
||||
radios.forEach((otherRadio) => {
|
||||
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
|
||||
otherRadio.disabled = false;
|
||||
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
|
||||
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-activatable-radio-group="true"]').forEach((group) => {
|
||||
const isActive = group.dataset.componentState === 'active';
|
||||
group.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
});
|
||||
});
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
window.addEventListener('resize', updateMultiselectLabelAlignment);
|
||||
|
||||
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';
|
||||
|
||||
if (demo.dataset.activatable === 'true') {
|
||||
trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
|
||||
trigger.classList.remove('sg-pulldown--inactive-selectable');
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
panel.style.left = '0px';
|
||||
panel.style.right = 'auto';
|
||||
|
||||
const initialRect = panel.getBoundingClientRect();
|
||||
let offsetX = 0;
|
||||
const maxRight = window.innerWidth;
|
||||
|
||||
if (initialRect.right > maxRight) {
|
||||
offsetX -= initialRect.right - maxRight;
|
||||
}
|
||||
|
||||
if (initialRect.left + offsetX < 0) {
|
||||
offsetX += 0 - (initialRect.left + offsetX);
|
||||
}
|
||||
|
||||
panel.style.left = `${offsetX}px`;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
||||
const select = row.querySelector('.sg-pulldown');
|
||||
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateFilterRowState = () => {
|
||||
const isActive = row.dataset.active === 'true';
|
||||
row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
select.disabled = !isActive;
|
||||
};
|
||||
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Navigation Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Navigation Card</h1>
|
||||
<section id="pattern-navigation-card">
|
||||
<p class="sg-preview-label">Pattern: Navigation Card</p>
|
||||
|
||||
<div class="sg-preview-area sg-navigation-card-layout">
|
||||
<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">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Notifications</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Notifications</h1>
|
||||
|
||||
<section id="pattern-notifications">
|
||||
<p class="sg-preview-label">Pattern: Notifications</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-notifications-with-title">
|
||||
<p class="sg-preview-label">Pattern: Notification with title</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-notifications-small">
|
||||
<p class="sg-preview-label">Pattern: Notifications small</p>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern">
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
zum Unternehmen
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const updateNotificationsPatternRowState = () => {
|
||||
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
|
||||
grid.classList.remove('sg-notifications-pattern--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-notifications-pattern--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||
window.addEventListener('resize', updateNotificationsPatternRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Object Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Object Card</h1>
|
||||
<section id="pattern-object-card">
|
||||
<p class="sg-preview-label">Pattern: Object Card</p>
|
||||
<p class="sg-body">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Alcon 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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>
|
||||
</section>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
// Measure in native responsive state first (no shared-width lock).
|
||||
// Reading offsetTop after reset forces layout with current viewport width.
|
||||
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-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Object Group Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Object Group Card</h1>
|
||||
<section id="pattern-object-group-card">
|
||||
<p class="sg-preview-label">Pattern: Object Group Card</p>
|
||||
<p class="sg-body sg-object-group-card__hint">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||||
|
||||
<div class="sg-object-card-grid">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Alcon Inc.</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
// Measure in native responsive state first (no shared-width lock).
|
||||
// Reading offsetTop after reset forces layout with current viewport width.
|
||||
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');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,319 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Options Row</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Options Row</h1>
|
||||
<section id="pattern-options-row">
|
||||
<p class="sg-preview-label">Pattern: Options Row</p>
|
||||
|
||||
<p class="sg-table-label" style="color: var(--text-options-row-description);">
|
||||
Desktop/Tablet: gleiche Breite wie das zugehörige Element; linke Optionen linksbündig, rechte Optionen rechtsbündig.
|
||||
</p>
|
||||
|
||||
<p class="sg-table-label" style="color: var(--text-options-row-description);">
|
||||
Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Pulldown demo logic:
|
||||
// Pulldowns with checkbox options stay open while options are toggled,
|
||||
// because users may select or deselect several options in one opened panel.
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo'],
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,434 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Portal Header</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Portal Header</h1>
|
||||
|
||||
<section id="pattern-portal-header">
|
||||
<p class="sg-preview-label">Pattern: Portal Header</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Desktop/Tablet: Header skaliert über die verfügbare Breite.
|
||||
</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Mobile: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
|
||||
</p>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Portal Header ohne Options Row
|
||||
</p>
|
||||
|
||||
<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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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="true" data-component-part="tab-button" data-component-state="active">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="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||
Nächstes Element (Abstand nach unten: spacing-large)
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Portal Header mit Options Row
|
||||
</p>
|
||||
|
||||
<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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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="true" data-component-part="tab-button" data-component-state="active">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="false" data-component-part="tab-button" data-component-state="inactive">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>
|
||||
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||
Nächstes Element (Abstand nach unten: spacing-large)
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
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');
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Text Layouts</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Text Layouts</h1>
|
||||
<section id="pattern-text-layouts">
|
||||
<p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text 60% Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,469 @@
|
||||
<!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 Fundamentalanalyse Drawer</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Drawer</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="VSF Fundamentalanalyse Drawer Seite">
|
||||
<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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-inline-header-row" data-pattern-part="card-header">
|
||||
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" 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="Objekt-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 Objekt-Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Ticker: WDC<br>
|
||||
Region: Amerika<br>
|
||||
Sub-Region: Nordamerika<br>
|
||||
Land: Vereinigte Staaten von Amerika
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
ISIN: US9581021055<br>
|
||||
Industrie: Computer Hardware
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
|
||||
<p id="vsf-business-model-text" class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width" hidden>
|
||||
Produkte und Lösungen<br>
|
||||
Western Digital Corporation produziert Festplatten (Hard Disk Drives, HDD) in verschiedenen Formfaktoren und Kapazitäten. Zentrale Produktkategorien umfassen Marken wie WD Blue für allgemeine Computing-Anwendungen, WD Purple und WD Purple Pro für Überwachungssysteme, WD Red, WD Red Plus und WD Red Pro für Netzwerkspeicher (NAS) und kleine Büroumgebungen, WD Black für Gaming und Hochleistung, WD Gold für Unternehmensanwendungen sowie Ultrastar für Rechenzentren. Ergänzt werden diese durch externe Gehäuse wie My Passport und My Book sowie Netzwerkspeichersysteme der My Cloud-Serie. Seit der Abspaltung des Flash-Geschäfts 2025 konzentriert sich das Unternehmen ausschliesslich auf HDD-Technologien.<br><br>
|
||||
Zielmärkte und Kunden<br>
|
||||
Die wichtigsten Kundensegmente umfassen Endverbraucher für Desktop-Computer und Gaming, kleine Büros und Home-Office-Nutzer für NAS-Systeme, Überwachungsanbieter für Sicherheitslösungen, Unternehmen für Server- und Enterprise-Speicher sowie Rechenzentren für Hochkapazitäts-Datenspeicherung. Geografisch bedient das Unternehmen globale Märkte mit Schwerpunkt in Nordamerika, Europa, Asien-Pazifik und aufstrebenden Regionen wie Südostasien. Die Produktion erfolgt primär in Thailand und früher in Malaysia.<br><br>
|
||||
Geschäftsmodell<br>
|
||||
Western Digital agiert als vertikal integrierter Hersteller von Datenspeichergeräten mit Fokus auf Festplatten-Produktion. Die Wertschöpfungskette umfasst Forschung und Entwicklung zu magnetischen Aufzeichnungstechnologien, Fertigung von Platten, Köpfen und Controllern sowie Montage in San-Jose-basierten Einrichtungen und asiatischen Fabriken. Durch Akquisitionen wie HGST (2012) und frühere Read-Rite hat es Assets in Medien und Komponenten aufgebaut, was eine hohe Eigenfertigung ermöglicht. Das Modell basiert auf skalierbarer Massenproduktion für standardisierte Speicherplattformen.<br><br>
|
||||
Erlösstruktur<br>
|
||||
Die Umsatzquellen gliedern sich in Segmente für Client-Computing (WD Blue, WD Black), Überwachung (WD Purple), NAS und SMB (WD Red-Serie), Enterprise (WD Gold) und Rechenzentren (Ultrastar). Der Verkauf erfolgt mechanisch über Direktverkäufe an Original Equipment Manufacturer (OEM), Distributoren und Einzelhändler sowie über eigene Kanäle für externe Produkte. Die Konzentration liegt bei Enterprise- und Datacenter-Segmenten mit höheren Kapazitäten, während Client-Segmente Volumen generieren; keine Abonnements oder transaktionsbasierten Modelle.<br><br>
|
||||
Marktposition und Wettbewerbsvorteile<br>
|
||||
Western Digital hält eine führende Marktstellung als grösster traditioneller HDD-Hersteller weltweit nach der HGST-Integration. Strukturelle Vorteile umfassen vertikale Integration in Plattenmedien, Schreib-/Leseköpfe und Controller-Technologie sowie heliumgefüllte Hochkapazitätsmodelle bis 14 TB. Patente in Riesen-Magnetowiderstands-Köpfen (GMR) und Produktionskapazitäten in effizienten Fabriken sichern Skaleneffekte gegenüber Wettbewerbern.
|
||||
</p>
|
||||
<button id="vsf-business-model-toggle" class="sg-interaction-element sg-button" type="button" aria-controls="vsf-business-model-text" aria-expanded="false">Geschäftsmodell anzeigen</button>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="sg-transparent-card sg-analysis-intro-block" data-component="transparent-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-card-list-page__title-row">Fundamentalanalyse vom 12.5.2026 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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></h2>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Nächste Analyse: nicht bekannt
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
|
||||
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Fundamentalanalyse Navigation" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-fundamental-tab-panel-1" id="vsf-fundamental-tab-1" data-component-part="tab-button">Gesamtbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-2" id="vsf-fundamental-tab-2" data-component-part="tab-button">Marktbewertung</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-3" id="vsf-fundamental-tab-3" data-component-part="tab-button">Wachstum</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-4" id="vsf-fundamental-tab-4" data-component-part="tab-button">Profitabilität</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-5" id="vsf-fundamental-tab-5" data-component-part="tab-button">Stabilität</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-6" id="vsf-fundamental-tab-6" data-component-part="tab-button">TAM</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-7" id="vsf-fundamental-tab-7" data-component-part="tab-button">Zyklus</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-8" id="vsf-fundamental-tab-8" data-component-part="tab-button">Moat</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-9" id="vsf-fundamental-tab-9" data-component-part="tab-button">Technologie</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-block-card-group__panels">
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Gesamtbewertung">
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Gesamtbewertung">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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"><strong class="sg-score-bar-label">(9.9)</strong> attraktiv</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--white" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
<strong>Attraktiv. Starke Profitabilitäts- und Gewinnwachstumsdynamik durch KI-Nachfrage, solide Bilanz. Ambitionierte Bewertung setzt perfekte Ausführung voraus.</strong>
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Western Digital repräsentiert eine hochgradig zyklische, aber aktuell von einem strukturellen KI-Trend getragene Wachstumsgeschichte. Die zentrale Investment-These lautet: Das Unternehmen profitiert kurzfristig von einer außergewöhnlichen Nachfrage nach Hochkapazitäts-Festplatten für Rechenzentren, was zu einer explosiven Ergebnisdynamik führt, jedoch zu einer ambitionierten Bewertung, die eine perfekte Ausführung voraussetzt.
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Die entscheidenden Stärken sind die starke Profitabilitätsverbesserung mit hohen Kapitalrenditen, die robuste finanzielle Stabilität mit niedriger Verschuldung sowie die Skalenvorteile aus der vertikalen Integration. Dem stehen klare Risiken gegenüber: ein extrem hohes zyklisches Risiko mit Nachfrageschwankungen bis zu 40 Prozent, eine nur mäßig verteidigungsfähige Wettbewerbsposition unter Druck durch chinesische Konkurrenten und disruptive Technologien sowie eine Bewertung, die einen erheblichen Aufschlag auf das historische Niveau darstellt. Der zentrale Zielkonflikt liegt zwischen dem außergewöhnlichen kurzfristigen Wachstum und der langfristigen Nachhaltigkeit des Geschäftsmodells in einer hart umkämpften, kapitalintensiven Branche.
|
||||
</p>
|
||||
<p class="sg-body">
|
||||
Die Qualität des Unternehmens ist aufgrund seiner zyklischen Natur und der angreifbaren Wettbewerbsvorteile als mittel einzustufen. Für einen GARP-Investor ist das Investment aktuell neutral bis nicht attraktiv. Zwar sind Timing-Faktoren durch die zyklische Erholung und den KI-Rückenwind günstig, die extreme Bewertung (KGV nahe 44-47) spiegelt dieses Momentum jedoch bereits vollständig wider und bietet kein Margin of Safety. Das Investment eignet sich nur für risikobewusste Anleger, die auf eine Fortsetzung des KI-Superzyklus spekulieren.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Unterschied zur letzten Analyse vom 1.5.2026">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Unterschied zur letzten Analyse vom 1.5.2026 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Die Investment-Story hat sich insgesamt verbessert, da sich die strukturellen Wachstumstreiber konkretisiert und die Profitabilität deutlich beschleunigt hat.</p>
|
||||
<p class="sg-body">Die entscheidenden Veränderungen betreffen das Wachstumstempo und die Margenentwicklung. Das Umsatzwachstum beschleunigte sich auf 25 Prozent im Jahresvergleich, angetrieben von einer 28-prozentigen Zunahme im Cloud-Segment. Die bereinigte Bruttomarge stieg um 770 Basispunkte auf 46,1 Prozent, unterstützt durch eine günstigere Produktmischung und Skaleneffekte. Zudem wurde die Prognose für das kommende Quartal auf ein Wachstum von 40 Prozent angehoben, was auf eine anhaltend starke Nachfrage hindeutet.</p>
|
||||
<p class="sg-body">Diese Entwicklungen bestätigen die ursprüngliche These eines durch künstliche Intelligenz getriebenen Speicher-Superzyklus und stärken sie sogar. Das verbesserte Profitabilitätsniveau und die höheren Wachstumsprognosen senken das Risiko einer kurzfristigen zyklischen Abschwächung, während die Bewertung weiterhin unter dem historischen Durchschnitt bleibt. Das Chance-Risiko-Profil hat sich somit zugunsten der Chancen verschoben.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Marktbewertung">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Marktbewertung Kennzahlen" data-component="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-component-part="data-table-header-cell">Kennzahl</th>
|
||||
<th data-component-part="data-table-header-cell">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Die Aktie von Western Digital wird mit einem Kurs-Gewinn-Verhältnis für das nächste Jahr von knapp 44 bis 47 bewertet. Dies stellt einen erheblichen Aufschlag gegenüber dem historischen Fünfjahresdurchschnitt von etwa 19,5 dar. Diese Bewertungsprämie ist durch ein außergewöhnliches Ergebniswachstum begründet. Für das Geschäftsjahr 2026 erwarten Analysten ein bereinigtes Ergebnis je Aktie, das sich um etwa 81 bis 100 Prozent erhöht. Für das folgende Jahr wird ein weiterer Anstieg auf rund 13,82 Dollar prognostiziert.</p>
|
||||
<p class="sg-body">Diese Dynamik speist sich aus der künstlichen Intelligenz getriebenen Nachfrage nach hochkapazitiven Festplatten in Rechenzentren. Das Cloud-Segment des Unternehmens wächst mit 28 bis 40 Prozent im Jahresvergleich und generiert mittlerweile 89 Prozent der Umsätze. Zugleich expandiert die Bruttomarge strukturell, was auf Preissetzungsmacht und positive Produktmix-Effekte hindeutet. Das gegenwärtige Bewertungsniveau setzt allerdings eine perfekte Ausführung voraus. Sollte der Superzyklus der künstlichen Intelligenz schwächer ausfallen oder es zu Überkapazitäten bei Halbleitern kommen, droht eine Bewertungskorrektur. Zum jetzigen Zeitpunkt erscheint die Bewertung ambitioniert, aber im Kontext des beschleunigten Ergebniswachstums nicht irrational. Anleger zahlen für das Umsatzmomentum und die strukturelle Margenverbesserung, nicht jedoch für überdurchschnittliche Langzeitgewinne.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Wachstum">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Wachstum Kennzahlen" data-component="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-component-part="data-table-header-cell">Kennzahl</th>
|
||||
<th data-component-part="data-table-header-cell">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Profitabilität">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Profitabilität Kennzahlen" data-component="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-component-part="data-table-header-cell">Kennzahl</th>
|
||||
<th data-component-part="data-table-header-cell">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Stabilität">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-score-bar-list sg-score-bar-list--single-score" 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"><strong class="sg-score-bar-label">(9.9)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
|
||||
<table class="sg-data-table" aria-label="Stabilität Kennzahlen" data-component="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-component-part="data-table-header-cell">Kennzahl</th>
|
||||
<th data-component-part="data-table-header-cell">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__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></td>
|
||||
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<p class="sg-body">Graphik</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-6" role="tabpanel" aria-labelledby="vsf-fundamental-tab-6" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="TAM">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Der Gesamtmarkt für Datenspeicher wird bis zum Jahr 2030 auf rund 200 Milliarden Dollar geschätzt. Dieses Wachstum wird durch exponentiell steigende Datenmengen angetrieben, wobei Technologien wie Cloud-Computing und das Training künstlicher Intelligenz zentrale Treiber mit hohen jährlichen Zuwachsraten sind. Western Digital adressiert primär den NAND-Flash-Markt, in dem es mit einem Marktanteil von 15 bis 18 Prozent hinter dem Marktführer liegt.</p>
|
||||
<p class="sg-body">Der Wettbewerb ist in einem Dreier-Oligopol intensiv und verschärft sich durch den Kapazitätsausbau eines chinesischen Konkurrenten. Realistischer Expansionsspielraum für Western Digital wird auf einen Marktanteilsgewinn von 5 bis 10 Prozent geschätzt, angetrieben durch überdurchschnittliches Bit-Wachstum und die positive Nachfrage im KI-Bereich. Der direkt adressierbare Markt konzentriert sich auf Enterprise-SSDs und Cloud-Speicher, da der Markt für Consumer-Festplatten rückläufig ist. Überproportionales Wachstum wäre möglich, wenn das Unternehmen KI-spezifische Speicherlösungen priorisiert, allerdings limitiert Preisdruck die Marge.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-7" role="tabpanel" aria-labelledby="vsf-fundamental-tab-7" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Zyklus">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Zyklus.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-8" role="tabpanel" aria-labelledby="vsf-fundamental-tab-8" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Moat">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Moat.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-9" role="tabpanel" aria-labelledby="vsf-fundamental-tab-9" hidden>
|
||||
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Technologie">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><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-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Technologie.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
const businessModelToggleButton = document.getElementById('vsf-business-model-toggle');
|
||||
const businessModelText = document.getElementById('vsf-business-model-text');
|
||||
|
||||
if (businessModelToggleButton && businessModelText) {
|
||||
businessModelToggleButton.addEventListener('click', () => {
|
||||
const isExpanded = businessModelToggleButton.getAttribute('aria-expanded') === 'true';
|
||||
const nextExpanded = !isExpanded;
|
||||
|
||||
businessModelText.hidden = !nextExpanded;
|
||||
businessModelToggleButton.setAttribute('aria-expanded', String(nextExpanded));
|
||||
businessModelToggleButton.textContent = nextExpanded
|
||||
? 'Geschäftsmodell ausblenden'
|
||||
: 'Geschäftsmodell anzeigen';
|
||||
});
|
||||
}
|
||||
|
||||
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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
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));
|
||||
});
|
||||
});
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
|
||||
|
||||
if (tabGroup) {
|
||||
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
|
||||
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
const activateTab = (targetTab) => {
|
||||
tabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||||
});
|
||||
|
||||
panels.forEach((panel) => {
|
||||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||||
});
|
||||
};
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => {
|
||||
activateTab(tab);
|
||||
});
|
||||
|
||||
tab.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
const direction = event.key === 'ArrowRight' ? 1 : -1;
|
||||
const nextIndex = (index + direction + tabs.length) % tabs.length;
|
||||
const nextTab = tabs[nextIndex];
|
||||
nextTab.focus();
|
||||
activateTab(nextTab);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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 Fundamentalanalyse Mobile</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Mobile</h1>
|
||||
|
||||
<section class="sg-card-list-page" aria-label="VSF Fundamentalanalyse Seite mobil">
|
||||
<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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
||||
<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 mobil">
|
||||
<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 mobil">
|
||||
<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 Zurück zur Liste 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">
|
||||
<a class="sg-hyperlink" href="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,926 @@
|
||||
<!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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||||
<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>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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>
|
||||
|
||||
<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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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">
|
||||
<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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 class="sg-score-bar-item" data-component="score-bar">
|
||||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilitä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--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-company-card__moat-row">
|
||||
<span class="sg-score-bar-label sg-bar-label sg-company-card__moat-label">Moat:</span>
|
||||
<span class="sg-bar-label sg-company-card__moat-neutral sg-company-card__moat-value">Maessig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary">
|
||||
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
|
||||
</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 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>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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 mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||||
|
||||
document.querySelectorAll('.sg-object-card__action').forEach((button) => {
|
||||
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
if (mobileBreakpoint.matches) {
|
||||
window.location.href = './vsf-card-listen-fundamentalanalyse-mobile.html';
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = './vsf-card-listen-fundamentalanalyse-drawer.html';
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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-pulldown-demo')) {
|
||||
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>
|
||||
@@ -0,0 +1,507 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Layout VSF List Card</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF List Card</h1>
|
||||
|
||||
<section id="layout-vsf-list-card">
|
||||
<p class="sg-preview-label">Layout: VSF List Card</p>
|
||||
<p class="sg-body">Diese Layout-Seite zeigt VSF-spezifische List-Card-Layouts als Grundlage fuer weitere Ausdifferenzierungen.</p>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 1: Neue Liste anlegen Karte</h2>
|
||||
<div class="sg-object-card-grid" aria-label="VSF List Card Layout Neue Liste anlegen">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 2: Maximale Listenzahl erreicht</h2>
|
||||
<div class="sg-object-card-grid" aria-label="VSF List Card Layout maximale Listenzahl erreicht">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Maximale Listenzahl erreicht Karte">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular deaktiviert">
|
||||
<p class="sg-vsf-list-card-limit-note">Maximale Listenanzahl erreicht. Du musst eine Liste loeschen oder dein Abonnement upgraden, um mehr Listen anzulegen.</p>
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--disabled sg-form-disabled sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp" disabled aria-disabled="true">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--disabled sg-form-disabled"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
disabled
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-disabled"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
disabled
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--inactive sg-form-sections-card__action" type="button" disabled aria-disabled="true">Zuruecksetzen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-button--disabled sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
|
||||
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">NAME DER LISTE</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" href="#!" data-overlay-open-dialog="edit">Editieren</a>
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||
<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">Medianscore:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<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--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</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>
|
||||
</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>
|
||||
</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>
|
||||
</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">Stabilitä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--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const formCard = document.querySelector('#layout-vsf-list-card .sg-object-card-grid:first-of-type .sg-form-sections-card');
|
||||
const processButton = formCard?.querySelector('.sg-button--process');
|
||||
|
||||
const updateProcessButtonState = () => {
|
||||
if (!formCard || !processButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hasPulldownSelection = Array.from(formCard.querySelectorAll('[data-pulldown-option]'))
|
||||
.some((option) => option.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(formCard.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasPulldownSelection || hasTextInput;
|
||||
|
||||
processButton.disabled = !isActive;
|
||||
processButton.setAttribute('aria-disabled', String(!isActive));
|
||||
processButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
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;
|
||||
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';
|
||||
updateProcessButtonState();
|
||||
};
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
formCard?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateProcessButtonState);
|
||||
});
|
||||
updateProcessButtonState();
|
||||
|
||||
const editInputs = document.querySelectorAll('[data-vsf-edit-input]');
|
||||
const editSaveButton = document.querySelector('[data-vsf-edit-save]');
|
||||
const deleteDialogInput = document.querySelector('[data-vsf-delete-confirmation-input]');
|
||||
const deleteDialogSubmitButton = document.querySelector('[data-vsf-delete-confirmation-submit]');
|
||||
|
||||
if (editInputs.length > 0 && editSaveButton) {
|
||||
const updateEditSaveState = () => {
|
||||
const hasInput = Array.from(editInputs).some((field) => field.value.trim().length > 0);
|
||||
editSaveButton.disabled = !hasInput;
|
||||
editSaveButton.setAttribute('aria-disabled', String(!hasInput));
|
||||
editSaveButton.classList.toggle('sg-button--process-inactive', !hasInput);
|
||||
};
|
||||
|
||||
editInputs.forEach((field) => {
|
||||
field.addEventListener('input', updateEditSaveState);
|
||||
});
|
||||
updateEditSaveState();
|
||||
}
|
||||
|
||||
if (deleteDialogInput && deleteDialogSubmitButton) {
|
||||
const updateDeleteDialogState = () => {
|
||||
const isValid = deleteDialogInput.value === 'DELETE';
|
||||
deleteDialogSubmitButton.disabled = !isValid;
|
||||
deleteDialogSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
deleteDialogSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
deleteDialogInput.addEventListener('input', updateDeleteDialogState);
|
||||
updateDeleteDialogState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('.sg-delete-confirmation-pattern__floating-card').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`);
|
||||
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||||
|
||||
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));
|
||||
|
||||
if (!nextState || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrap.dataset.align = 'right';
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
if (panelRect.left < 0) {
|
||||
wrap.dataset.align = 'left';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo') || event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,645 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF List Detailseite</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
|
||||
|
||||
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
|
||||
<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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__content">
|
||||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
|
||||
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
|
||||
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
|
||||
<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="Meldungsmenü ö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="Meldungsmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-overlay-open-dialog="meldungen">Meldungen anpassen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
|
||||
Meldungen ausblenden
|
||||
</button>
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
|
||||
<h2 id="vsf-meldungen-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Meldungen</h2>
|
||||
<div class="sg-form-sections-card__option-group" aria-label="Meldungsarten">
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 1" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 1</span>
|
||||
</label>
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 2" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 2</span>
|
||||
</label>
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Meldungsart 3" data-vsf-meldungen-checkbox>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Meldungsart 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-overlay-dialog-close data-vsf-meldungen-save>Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
|
||||
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
|
||||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||||
<div class="sg-strong">Alcon 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" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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="object-card" aria-label="Objekt Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon 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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<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`
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-toggle-target="meldungen"]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const groupCard = button.closest('.sg-group-card');
|
||||
if (!groupCard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cards = groupCard.querySelectorAll('.sg-vsf-list-detail-page__notification-card');
|
||||
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
||||
const nextExpanded = !isExpanded;
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.classList.toggle('sg-vsf-list-detail-page__notification-card--hidden', !nextExpanded);
|
||||
card.setAttribute('aria-hidden', String(!nextExpanded));
|
||||
});
|
||||
|
||||
button.setAttribute('aria-expanded', String(nextExpanded));
|
||||
button.textContent = nextExpanded ? (button.dataset.expandedLabel || 'Meldungen ausblenden') : (button.dataset.collapsedLabel || 'Meldungen einblenden');
|
||||
});
|
||||
});
|
||||
|
||||
const closeVsfDialog = (stage) => {
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
stage.querySelectorAll('[data-overlay-dialog]').forEach((otherDialog) => {
|
||||
otherDialog.hidden = true;
|
||||
});
|
||||
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
closeVsfDialog(stage);
|
||||
});
|
||||
});
|
||||
|
||||
const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]');
|
||||
const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]');
|
||||
|
||||
const updateMeldungenSaveState = () => {
|
||||
if (!meldungenSaveButton) {
|
||||
return;
|
||||
}
|
||||
const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true');
|
||||
meldungenSaveButton.disabled = !hasSelection;
|
||||
meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection));
|
||||
meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection);
|
||||
};
|
||||
|
||||
meldungenCheckboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', () => {
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const option = checkbox.closest('[data-component="checkbox-field"]');
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
checkbox.classList.toggle('sg-form-active', nextState);
|
||||
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
|
||||
if (option) {
|
||||
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
|
||||
}
|
||||
updateMeldungenSaveState();
|
||||
});
|
||||
});
|
||||
|
||||
updateMeldungenSaveState();
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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-pulldown-demo')) {
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-overlay-open-dialog]')) {
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
if (stage.dataset.dialogOpen === 'true') {
|
||||
closeVsfDialog(stage);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,656 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Listen Übersicht Seite V2</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Listen Übersicht Seite V2</h1>
|
||||
|
||||
<section class="sg-vsf-list-overview-page-v2" aria-label="VSF Listen Übersicht Seite V2">
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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>
|
||||
</article>
|
||||
|
||||
<div class="sg-transparent-card sg-vsf-list-overview-page-v2__intro" aria-label="Intro-Bereich" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1">Meine Listen</h1>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut a
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-object-card-grid" aria-label="VSF Listen Cards Übersicht">
|
||||
<div class="sg-object-card sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-vsf-list-card-context" data-pattern="object-group-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">NAME DER LISTE</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" href="#!" data-overlay-open-dialog="edit">Editieren</a>
|
||||
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-company-count">
|
||||
<p class="sg-body"><strong>7 Unternehmen</strong></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||
<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">Medianscore:</p>
|
||||
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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>
|
||||
<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--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
PE: <span class="sg-data-table__value">28.8</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</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>
|
||||
</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>
|
||||
</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>
|
||||
</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">Stabilitä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--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||
</div>
|
||||
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||
<div class="sg-object-card__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Neue Liste anlegen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Listentyp</span>
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
|
||||
Listentyp
|
||||
</button>
|
||||
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||
type="text"
|
||||
placeholder="Name eingeben"
|
||||
aria-label="Name"
|
||||
maxlength="80"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea
|
||||
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||
rows="4"
|
||||
placeholder="Beschreibung eingeben"
|
||||
aria-label="Beschreibung"
|
||||
maxlength="350"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<main class="sg-vsf-list-overview-page-v2__content" aria-label="Inhaltsbereich">
|
||||
<section class="sg-vsf-list-overview-page-v2__primary" aria-label="Primärer Bereich"></section>
|
||||
<aside class="sg-vsf-list-overview-page-v2__secondary" aria-label="Sekundärer Bereich"></aside>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
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');
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const editInputs = document.querySelectorAll('[data-vsf-edit-input]');
|
||||
const editSaveButton = document.querySelector('[data-vsf-edit-save]');
|
||||
const deleteDialogInput = document.querySelector('[data-vsf-delete-confirmation-input]');
|
||||
const deleteDialogSubmitButton = document.querySelector('[data-vsf-delete-confirmation-submit]');
|
||||
|
||||
if (editInputs.length > 0 && editSaveButton) {
|
||||
const updateEditSaveState = () => {
|
||||
const hasInput = Array.from(editInputs).some((field) => field.value.trim().length > 0);
|
||||
editSaveButton.disabled = !hasInput;
|
||||
editSaveButton.setAttribute('aria-disabled', String(!hasInput));
|
||||
editSaveButton.classList.toggle('sg-button--process-inactive', !hasInput);
|
||||
};
|
||||
|
||||
editInputs.forEach((field) => {
|
||||
field.addEventListener('input', updateEditSaveState);
|
||||
});
|
||||
updateEditSaveState();
|
||||
}
|
||||
|
||||
if (deleteDialogInput && deleteDialogSubmitButton) {
|
||||
const updateDeleteDialogState = () => {
|
||||
const isValid = deleteDialogInput.value === 'DELETE';
|
||||
deleteDialogSubmitButton.disabled = !isValid;
|
||||
deleteDialogSubmitButton.setAttribute('aria-disabled', String(!isValid));
|
||||
deleteDialogSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
|
||||
};
|
||||
|
||||
deleteDialogInput.addEventListener('input', updateDeleteDialogState);
|
||||
updateDeleteDialogState();
|
||||
}
|
||||
|
||||
const closeStageDialogs = (stage) => {
|
||||
stage.querySelectorAll('.sg-delete-confirmation-pattern__floating-card').forEach((dialog) => {
|
||||
dialog.hidden = true;
|
||||
});
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = link.getAttribute('data-overlay-open-dialog');
|
||||
const dialog = stage.querySelector(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`);
|
||||
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeStageDialogs(stage);
|
||||
dialog.hidden = false;
|
||||
stage.dataset.dialogOpen = 'true';
|
||||
|
||||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||||
if (menuWrap) {
|
||||
menuWrap.dataset.open = 'false';
|
||||
}
|
||||
if (menuButton) {
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-overlay-dialog-close], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
closeStageDialogs(stage);
|
||||
});
|
||||
});
|
||||
|
||||
const createListForm = document.querySelector('.sg-vsf-list-overview-page-v2 .sg-object-card-grid .sg-form-sections-card');
|
||||
const createListProcessButton = createListForm?.querySelector('.sg-button--process');
|
||||
|
||||
const updateCreateListProcessButtonState = () => {
|
||||
if (!createListForm || !createListProcessButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hasPulldownSelection = Array.from(createListForm.querySelectorAll('[data-pulldown-option]'))
|
||||
.some((option) => option.getAttribute('aria-checked') === 'true');
|
||||
const hasTextInput = Array.from(createListForm.querySelectorAll('input[type="text"], textarea'))
|
||||
.some((field) => field.value.trim().length > 0);
|
||||
const isActive = hasPulldownSelection || hasTextInput;
|
||||
|
||||
createListProcessButton.disabled = !isActive;
|
||||
createListProcessButton.setAttribute('aria-disabled', String(!isActive));
|
||||
createListProcessButton.classList.toggle('sg-button--process-inactive', !isActive);
|
||||
};
|
||||
|
||||
createListForm?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
|
||||
field.addEventListener('input', updateCreateListProcessButtonState);
|
||||
});
|
||||
createListForm?.querySelectorAll('.sg-pulldown-demo__trigger, [data-pulldown-option]').forEach((control) => {
|
||||
control.addEventListener('click', () => {
|
||||
setTimeout(updateCreateListProcessButtonState, 0);
|
||||
});
|
||||
});
|
||||
updateCreateListProcessButtonState();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,818 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – VSF Meldungen</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF Meldungen</h1>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<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" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" 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="true" data-component-part="tab-button" data-component-state="active">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="false" data-component-part="tab-button" data-component-state="inactive">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-transparent-card sg-vsf-list-detail-page__intro-block sg-portal-header-pattern-variant__next-element" aria-label="Meldungen Titel" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
|
||||
</div>
|
||||
|
||||
<section class="sg-vsf-meldungen-layout" aria-label="VSF Meldungen">
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-updates-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-updates-heading">Updates</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Aktualisierung mit hoher Priorität zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Positive Meldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Update Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weitere Meldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-kaufsignale-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-kaufsignale-heading">Kaufsignale</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Verkaufssignal zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Positives Kaufsignal zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Kaufsignal Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weitere Signalmeldung zur Illustration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
|
||||
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-termine-heading">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" id="vsf-meldungen-termine-heading">Termine</h2>
|
||||
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Eins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Terminmeldung mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Zwei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Weiterer Termin mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
<span class="sg-strong">Termin Signal Drei</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">
|
||||
Dritte Terminmeldung mit weissem Hintergrund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
|
||||
<section class="sg-vsf-meldungen-mobile" aria-label="VSF Meldungen für Mobile">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<div class="sg-tab-button-group sg-vsf-meldungen-mobile__tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-mobile-panel-updates" id="vsf-meldungen-mobile-tab-updates" data-component-part="tab-button">Updates</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-kaufsignale" id="vsf-meldungen-mobile-tab-kaufsignale" data-component-part="tab-button">Kaufsignale</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-termine" id="vsf-meldungen-mobile-tab-termine" data-component-part="tab-button">Termine</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panels">
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-updates">
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen Mobile">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Aktualisierung mit hoher Priorität zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Positive Meldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Update Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weitere Meldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-kaufsignale" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-kaufsignale" hidden>
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen Mobile">
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Verkaufssignal zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Positives Kaufsignal zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weitere Signalmeldung zur Illustration.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
|
||||
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-termine" hidden>
|
||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen Mobile">
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Eins</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Terminmeldung mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Zwei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Weiterer Termin mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||
<p class="sg-body"><span class="sg-strong">Termin Signal Drei</span></p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||
<p class="sg-body">Dritte Terminmeldung mit weissem Hintergrund.</p>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="sg-navigation-card-layout 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
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');
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
|
||||
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-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||||
checkbox.setAttribute('aria-checked', String(nextState));
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
|
||||
if (selectionMode === 'multiple') {
|
||||
const nextState = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextState));
|
||||
} else {
|
||||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||||
});
|
||||
}
|
||||
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (selectionMode === 'multiple') {
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
} else {
|
||||
pulldownDemo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
|
||||
window.sgInitHelpIconOverlays({
|
||||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
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-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const updateNotificationsPatternRowState = () => {
|
||||
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
|
||||
grid.classList.remove('sg-notifications-pattern--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-notifications-pattern--multi-row');
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||
window.addEventListener('resize', updateNotificationsPatternRowState);
|
||||
|
||||
const mobileVsfMeldungen = document.querySelector('.sg-vsf-meldungen-mobile');
|
||||
|
||||
if (mobileVsfMeldungen) {
|
||||
const mobileTabs = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tab"]'));
|
||||
const mobilePanels = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
const activateMobileTab = (targetTab) => {
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||||
tab.dataset.componentState = tab === targetTab ? 'active' : 'inactive';
|
||||
});
|
||||
|
||||
mobilePanels.forEach((panel) => {
|
||||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||||
});
|
||||
};
|
||||
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
activateMobileTab(tab);
|
||||
});
|
||||
});
|
||||
|
||||
const initialTab = mobileTabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || mobileTabs[0];
|
||||
if (initialTab) {
|
||||
activateMobileTab(initialTab);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user