@conciso/design-system-angular 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +38 -0
  2. package/fesm2022/conciso-design-system-angular.mjs +544 -163
  3. package/fesm2022/conciso-design-system-angular.mjs.map +1 -1
  4. package/package.json +2 -2
package/fesm2022/conciso-design-system-angular.mjs CHANGED
@@ -68,7 +68,9 @@ function apply() {
68
68
  _mql = null;
69
69
  // `matchMedia` existiert nur im Browser; ohne diesen Guard bricht SSR/Prerender
70
70
  // mit "window is not defined", sobald der Modus dort gesetzt wird.
71
- if (_mode() === 'system' && typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
71
+ if (_mode() === 'system' &&
72
+ typeof window !== 'undefined' &&
73
+ typeof window.matchMedia === 'function') {
72
74
  _mql = window.matchMedia('(prefers-color-scheme: dark)');
73
75
  _mql.addEventListener('change', onSystemChange);
74
76
  reflect(_mql.matches);
@@ -177,7 +179,12 @@ class ButtonComponent {
177
179
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
178
180
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
179
181
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ButtonComponent, isStandalone: true, selector: "cds-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "full() ? 'block' : null" } }, ngImport: i0, template: `
180
- <button [class]="classes()" [disabled]="disabled()" [attr.type]="type()" (click)="clicked.emit($event)">
182
+ <button
183
+ [class]="classes()"
184
+ [disabled]="disabled()"
185
+ [attr.type]="type()"
186
+ (click)="clicked.emit($event)"
187
+ >
181
188
  {{ label() }}
182
189
  </button>
183
190
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -192,7 +199,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
192
199
  // Inhaltsbreite). Bei full=true daher den Host auf block stellen.
193
200
  host: { '[style.display]': "full() ? 'block' : null" },
194
201
  template: `
195
- <button [class]="classes()" [disabled]="disabled()" [attr.type]="type()" (click)="clicked.emit($event)">
202
+ <button
203
+ [class]="classes()"
204
+ [disabled]="disabled()"
205
+ [attr.type]="type()"
206
+ (click)="clicked.emit($event)"
207
+ >
196
208
  {{ label() }}
197
209
  </button>
198
210
  `,
@@ -453,7 +465,11 @@ class TopnavComponent {
453
465
  @if (logoSrc()) {
454
466
  <!-- Größe (24px) + Theme-Swap kommen aus der portablen css/components.css
455
467
  (.ep-logo img, .logo-themed-default/-light via [data-theme]). -->
456
- <img [class.logo-themed-default]="!!logoDarkSrc()" [src]="logoSrc()" [alt]="logoAlt() || logo()" />
468
+ <img
469
+ [class.logo-themed-default]="!!logoDarkSrc()"
470
+ [src]="logoSrc()"
471
+ [alt]="logoAlt() || logo()"
472
+ />
457
473
  @if (logoDarkSrc()) {
458
474
  <img class="logo-themed-light" [src]="logoDarkSrc()" [alt]="logoAlt() || logo()" />
459
475
  }
@@ -485,18 +501,32 @@ class TopnavComponent {
485
501
  [attr.aria-controls]="subId(i)"
486
502
  (click)="toggleSub(i)"
487
503
  >
488
- <ng-icon class="ep-nav-item-caret" name="uiCaretDown" size="10px" aria-hidden="true" />
504
+ <ng-icon
505
+ class="ep-nav-item-caret"
506
+ name="uiCaretDown"
507
+ size="10px"
508
+ aria-hidden="true"
509
+ />
489
510
  </button>
490
511
  <div class="ep-nav-sub" [id]="subId(i)">
491
512
  @for (s of item.sub; track $index) {
492
- <a class="ep-nav-sub-btn" [href]="s.href" [attr.aria-current]="s.href === activeHref() ? 'page' : null" (click)="closeAll()">
513
+ <a
514
+ class="ep-nav-sub-btn"
515
+ [href]="s.href"
516
+ [attr.aria-current]="s.href === activeHref() ? 'page' : null"
517
+ (click)="closeAll()"
518
+ >
493
519
  {{ s.label }}
494
520
  </a>
495
521
  }
496
522
  </div>
497
523
  </div>
498
524
  } @else {
499
- <a class="ep-nav-btn" [href]="item.href || '#'" [attr.aria-current]="item.href && item.href === activeHref() ? 'page' : null">
525
+ <a
526
+ class="ep-nav-btn"
527
+ [href]="item.href || '#'"
528
+ [attr.aria-current]="item.href && item.href === activeHref() ? 'page' : null"
529
+ >
500
530
  {{ item.label }}
501
531
  </a>
502
532
  }
@@ -505,30 +535,30 @@ class TopnavComponent {
505
535
 
506
536
  <div class="ep-nav-actions">
507
537
  @if (showSearch()) {
508
- <div class="ep-nav-search" [class.is-open]="searchOpen()">
509
- <button
510
- class="ep-nav-icon-btn ep-nav-search-toggle"
511
- type="button"
512
- aria-label="Suche"
513
- [attr.aria-expanded]="searchOpen()"
514
- (click)="toggleSearch()"
515
- >
516
- <ng-icon name="heroMagnifyingGlass" size="22px" aria-hidden="true" />
517
- </button>
518
- <div class="ep-nav-search-pop">
519
- <form class="ep-nav-search-form" role="search" (submit)="$event.preventDefault()">
520
- <label class="sr-only" [attr.for]="searchId">Suchbegriff</label>
521
- <input
522
- class="ep-nav-search-input"
523
- [id]="searchId"
524
- type="search"
525
- placeholder="Wonach suchst Du?"
526
- autocomplete="off"
527
- />
528
- <button class="btn btn-filled btn-sm btn-co" type="submit">Suchen</button>
529
- </form>
538
+ <div class="ep-nav-search" [class.is-open]="searchOpen()">
539
+ <button
540
+ class="ep-nav-icon-btn ep-nav-search-toggle"
541
+ type="button"
542
+ aria-label="Suche"
543
+ [attr.aria-expanded]="searchOpen()"
544
+ (click)="toggleSearch()"
545
+ >
546
+ <ng-icon name="heroMagnifyingGlass" size="22px" aria-hidden="true" />
547
+ </button>
548
+ <div class="ep-nav-search-pop">
549
+ <form class="ep-nav-search-form" role="search" (submit)="$event.preventDefault()">
550
+ <label class="sr-only" [attr.for]="searchId">Suchbegriff</label>
551
+ <input
552
+ class="ep-nav-search-input"
553
+ [id]="searchId"
554
+ type="search"
555
+ placeholder="Wonach suchst Du?"
556
+ autocomplete="off"
557
+ />
558
+ <button class="btn btn-filled btn-sm btn-co" type="submit">Suchen</button>
559
+ </form>
560
+ </div>
530
561
  </div>
531
- </div>
532
562
  }
533
563
 
534
564
  <cds-theme-cycle [showSystem]="showSystemTheme()" />
@@ -549,7 +579,9 @@ class TopnavComponent {
549
579
  </button>
550
580
 
551
581
  @if (showCta()) {
552
- <a class="btn btn-filled btn-sm btn-co" href="#" (click)="$event.preventDefault()">{{ ctaLabel() }}</a>
582
+ <a class="btn btn-filled btn-sm btn-co" href="#" (click)="$event.preventDefault()">{{
583
+ ctaLabel()
584
+ }}</a>
553
585
  }
554
586
  </header>
555
587
  `, isInline: true, styles: [".ep-nav-item-caret{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: ThemeCycleComponent, selector: "cds-theme-cycle", inputs: ["showSystem"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ heroBars3, heroMagnifyingGlass, heroXMark, uiCaretDown })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -565,7 +597,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
565
597
  @if (logoSrc()) {
566
598
  <!-- Größe (24px) + Theme-Swap kommen aus der portablen css/components.css
567
599
  (.ep-logo img, .logo-themed-default/-light via [data-theme]). -->
568
- <img [class.logo-themed-default]="!!logoDarkSrc()" [src]="logoSrc()" [alt]="logoAlt() || logo()" />
600
+ <img
601
+ [class.logo-themed-default]="!!logoDarkSrc()"
602
+ [src]="logoSrc()"
603
+ [alt]="logoAlt() || logo()"
604
+ />
569
605
  @if (logoDarkSrc()) {
570
606
  <img class="logo-themed-light" [src]="logoDarkSrc()" [alt]="logoAlt() || logo()" />
571
607
  }
@@ -597,18 +633,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
597
633
  [attr.aria-controls]="subId(i)"
598
634
  (click)="toggleSub(i)"
599
635
  >
600
- <ng-icon class="ep-nav-item-caret" name="uiCaretDown" size="10px" aria-hidden="true" />
636
+ <ng-icon
637
+ class="ep-nav-item-caret"
638
+ name="uiCaretDown"
639
+ size="10px"
640
+ aria-hidden="true"
641
+ />
601
642
  </button>
602
643
  <div class="ep-nav-sub" [id]="subId(i)">
603
644
  @for (s of item.sub; track $index) {
604
- <a class="ep-nav-sub-btn" [href]="s.href" [attr.aria-current]="s.href === activeHref() ? 'page' : null" (click)="closeAll()">
645
+ <a
646
+ class="ep-nav-sub-btn"
647
+ [href]="s.href"
648
+ [attr.aria-current]="s.href === activeHref() ? 'page' : null"
649
+ (click)="closeAll()"
650
+ >
605
651
  {{ s.label }}
606
652
  </a>
607
653
  }
608
654
  </div>
609
655
  </div>
610
656
  } @else {
611
- <a class="ep-nav-btn" [href]="item.href || '#'" [attr.aria-current]="item.href && item.href === activeHref() ? 'page' : null">
657
+ <a
658
+ class="ep-nav-btn"
659
+ [href]="item.href || '#'"
660
+ [attr.aria-current]="item.href && item.href === activeHref() ? 'page' : null"
661
+ >
612
662
  {{ item.label }}
613
663
  </a>
614
664
  }
@@ -617,30 +667,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
617
667
 
618
668
  <div class="ep-nav-actions">
619
669
  @if (showSearch()) {
620
- <div class="ep-nav-search" [class.is-open]="searchOpen()">
621
- <button
622
- class="ep-nav-icon-btn ep-nav-search-toggle"
623
- type="button"
624
- aria-label="Suche"
625
- [attr.aria-expanded]="searchOpen()"
626
- (click)="toggleSearch()"
627
- >
628
- <ng-icon name="heroMagnifyingGlass" size="22px" aria-hidden="true" />
629
- </button>
630
- <div class="ep-nav-search-pop">
631
- <form class="ep-nav-search-form" role="search" (submit)="$event.preventDefault()">
632
- <label class="sr-only" [attr.for]="searchId">Suchbegriff</label>
633
- <input
634
- class="ep-nav-search-input"
635
- [id]="searchId"
636
- type="search"
637
- placeholder="Wonach suchst Du?"
638
- autocomplete="off"
639
- />
640
- <button class="btn btn-filled btn-sm btn-co" type="submit">Suchen</button>
641
- </form>
670
+ <div class="ep-nav-search" [class.is-open]="searchOpen()">
671
+ <button
672
+ class="ep-nav-icon-btn ep-nav-search-toggle"
673
+ type="button"
674
+ aria-label="Suche"
675
+ [attr.aria-expanded]="searchOpen()"
676
+ (click)="toggleSearch()"
677
+ >
678
+ <ng-icon name="heroMagnifyingGlass" size="22px" aria-hidden="true" />
679
+ </button>
680
+ <div class="ep-nav-search-pop">
681
+ <form class="ep-nav-search-form" role="search" (submit)="$event.preventDefault()">
682
+ <label class="sr-only" [attr.for]="searchId">Suchbegriff</label>
683
+ <input
684
+ class="ep-nav-search-input"
685
+ [id]="searchId"
686
+ type="search"
687
+ placeholder="Wonach suchst Du?"
688
+ autocomplete="off"
689
+ />
690
+ <button class="btn btn-filled btn-sm btn-co" type="submit">Suchen</button>
691
+ </form>
692
+ </div>
642
693
  </div>
643
- </div>
644
694
  }
645
695
 
646
696
  <cds-theme-cycle [showSystem]="showSystemTheme()" />
@@ -661,7 +711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
661
711
  </button>
662
712
 
663
713
  @if (showCta()) {
664
- <a class="btn btn-filled btn-sm btn-co" href="#" (click)="$event.preventDefault()">{{ ctaLabel() }}</a>
714
+ <a class="btn btn-filled btn-sm btn-co" href="#" (click)="$event.preventDefault()">{{
715
+ ctaLabel()
716
+ }}</a>
665
717
  }
666
718
  </header>
667
719
  `, styles: [".ep-nav-item-caret{display:inline-flex;align-items:center;justify-content:center}\n"] }]
@@ -804,14 +856,18 @@ class PillComponent {
804
856
  computedAriaLabel = computed(() => this.ariaLabel() ?? `Bereich ${this.label()}`, /* @ts-ignore */
805
857
  ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
806
858
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
807
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: PillComponent, isStandalone: true, selector: "cds-pill", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="pill" [attr.data-area]="area()" [attr.aria-label]="computedAriaLabel()">{{ label() }}</span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
859
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: PillComponent, isStandalone: true, selector: "cds-pill", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="pill" [attr.data-area]="area()" [attr.aria-label]="computedAriaLabel()">{{
860
+ label()
861
+ }}</span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
808
862
  }
809
863
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PillComponent, decorators: [{
810
864
  type: Component,
811
865
  args: [{
812
866
  selector: 'cds-pill',
813
867
  changeDetection: ChangeDetectionStrategy.OnPush,
814
- template: `<span class="pill" [attr.data-area]="area()" [attr.aria-label]="computedAriaLabel()">{{ label() }}</span>`,
868
+ template: `<span class="pill" [attr.data-area]="area()" [attr.aria-label]="computedAriaLabel()">{{
869
+ label()
870
+ }}</span>`,
815
871
  }]
816
872
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
817
873
 
@@ -932,7 +988,8 @@ class FieldBase extends CvaBase {
932
988
  * @internal
933
989
  */
934
990
  handleInput(event) {
935
- const value = event.target.value;
991
+ const value = event.target
992
+ .value;
936
993
  this.value.set(value);
937
994
  this.onChange(value);
938
995
  }
@@ -1161,7 +1218,11 @@ class TextareaFieldComponent extends FieldBase {
1161
1218
  ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
1162
1219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1163
1220
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: TextareaFieldComponent, isStandalone: true, selector: "cds-textarea-field", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1164
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaFieldComponent), multi: true },
1221
+ {
1222
+ provide: NG_VALUE_ACCESSOR,
1223
+ useExisting: forwardRef(() => TextareaFieldComponent),
1224
+ multi: true,
1225
+ },
1165
1226
  ], usesInheritance: true, ngImport: i0, template: `
1166
1227
  <cds-field-shell
1167
1228
  [label]="label()"
@@ -1195,7 +1256,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1195
1256
  changeDetection: ChangeDetectionStrategy.OnPush,
1196
1257
  imports: [FieldShellComponent],
1197
1258
  providers: [
1198
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaFieldComponent), multi: true },
1259
+ {
1260
+ provide: NG_VALUE_ACCESSOR,
1261
+ useExisting: forwardRef(() => TextareaFieldComponent),
1262
+ multi: true,
1263
+ },
1199
1264
  ],
1200
1265
  template: `
1201
1266
  <cds-field-shell
@@ -1238,7 +1303,11 @@ class SelectFieldComponent extends FieldBase {
1238
1303
  ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
1239
1304
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1240
1305
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SelectFieldComponent, isStandalone: true, selector: "cds-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1241
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectFieldComponent), multi: true },
1306
+ {
1307
+ provide: NG_VALUE_ACCESSOR,
1308
+ useExisting: forwardRef(() => SelectFieldComponent),
1309
+ multi: true,
1310
+ },
1242
1311
  ], usesInheritance: true, ngImport: i0, template: `
1243
1312
  <cds-field-shell
1244
1313
  [label]="label()"
@@ -1275,7 +1344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1275
1344
  changeDetection: ChangeDetectionStrategy.OnPush,
1276
1345
  imports: [FieldShellComponent],
1277
1346
  providers: [
1278
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectFieldComponent), multi: true },
1347
+ {
1348
+ provide: NG_VALUE_ACCESSOR,
1349
+ useExisting: forwardRef(() => SelectFieldComponent),
1350
+ multi: true,
1351
+ },
1279
1352
  ],
1280
1353
  template: `
1281
1354
  <cds-field-shell
@@ -1379,6 +1452,7 @@ class CheckboxComponent extends CvaBase {
1379
1452
  (change)="onCheckboxChange($event)"
1380
1453
  (blur)="markTouched()"
1381
1454
  />
1455
+ <!-- prettier-ignore -->
1382
1456
  <span style="font:var(--ty-body-md);color:var(--tx-secondary)"
1383
1457
  >{{ label() }}@if (linkLabel()) {&nbsp;<a class="body-link" [href]="linkHref()">{{ linkLabel() }}</a>}@if (required()) {&nbsp;<span class="req" aria-hidden="true">*</span>}</span
1384
1458
  >
@@ -1406,6 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1406
1480
  (change)="onCheckboxChange($event)"
1407
1481
  (blur)="markTouched()"
1408
1482
  />
1483
+ <!-- prettier-ignore -->
1409
1484
  <span style="font:var(--ty-body-md);color:var(--tx-secondary)"
1410
1485
  >{{ label() }}@if (linkLabel()) {&nbsp;<a class="body-link" [href]="linkHref()">{{ linkLabel() }}</a>}@if (required()) {&nbsp;<span class="req" aria-hidden="true">*</span>}</span
1411
1486
  >
@@ -1477,6 +1552,7 @@ class RadioGroupComponent extends CvaBase {
1477
1552
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
1478
1553
  ], usesInheritance: true, ngImport: i0, template: `
1479
1554
  <fieldset style="border:0;padding:0;margin:0;min-inline-size:0">
1555
+ <!-- prettier-ignore -->
1480
1556
  <legend
1481
1557
  style="font:var(--ty-label-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--tx-secondary);margin-bottom:var(--s2);padding:0"
1482
1558
  >{{ legend() }}@if (required()) {&nbsp;<span class="req" aria-hidden="true">*</span>}</legend
@@ -1516,6 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1516
1592
  ],
1517
1593
  template: `
1518
1594
  <fieldset style="border:0;padding:0;margin:0;min-inline-size:0">
1595
+ <!-- prettier-ignore -->
1519
1596
  <legend
1520
1597
  style="font:var(--ty-label-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--tx-secondary);margin-bottom:var(--s2);padding:0"
1521
1598
  >{{ legend() }}@if (required()) {&nbsp;<span class="req" aria-hidden="true">*</span>}</legend
@@ -1775,7 +1852,9 @@ class SelectComponent {
1775
1852
  this.activeIndex.set(i);
1776
1853
  // Aktiven Eintrag in Sicht scrollen (lange Listen).
1777
1854
  this.scrollTimer.schedule(() => {
1778
- this.host.nativeElement.querySelector(`#${CSS.escape(this.ids.option(i))}`)?.scrollIntoView({ block: 'nearest' });
1855
+ this.host.nativeElement
1856
+ .querySelector(`#${CSS.escape(this.ids.option(i))}`)
1857
+ ?.scrollIntoView({ block: 'nearest' });
1779
1858
  });
1780
1859
  }
1781
1860
  typeahead(char) {
@@ -1794,7 +1873,12 @@ class SelectComponent {
1794
1873
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SelectComponent, isStandalone: true, selector: "cds-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { listeners: { "focusout": "onFocusOut($event)", "document:pointerdown": "onDocPointerDown($event)" } }, providers: [
1795
1874
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true },
1796
1875
  ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: `
1797
- <div class="ep-select" [class.is-open]="open()" [class.is-disabled]="disabled()" [attr.data-area]="area() || null">
1876
+ <div
1877
+ class="ep-select"
1878
+ [class.is-open]="open()"
1879
+ [class.is-disabled]="disabled()"
1880
+ [attr.data-area]="area() || null"
1881
+ >
1798
1882
  <span class="ep-select-label" [id]="ids.label">{{ label() }}</span>
1799
1883
  <button
1800
1884
  #trigger
@@ -1821,7 +1905,9 @@ class SelectComponent {
1821
1905
  [id]="ids.menu"
1822
1906
  [attr.aria-labelledby]="ids.label"
1823
1907
  tabindex="-1"
1824
- [attr.aria-activedescendant]="open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null"
1908
+ [attr.aria-activedescendant]="
1909
+ open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null
1910
+ "
1825
1911
  (keydown)="onMenuKeydown($event)"
1826
1912
  >
1827
1913
  @for (opt of options(); track opt.value; let i = $index) {
@@ -1865,7 +1951,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1865
1951
  '(document:pointerdown)': 'onDocPointerDown($event)',
1866
1952
  },
1867
1953
  template: `
1868
- <div class="ep-select" [class.is-open]="open()" [class.is-disabled]="disabled()" [attr.data-area]="area() || null">
1954
+ <div
1955
+ class="ep-select"
1956
+ [class.is-open]="open()"
1957
+ [class.is-disabled]="disabled()"
1958
+ [attr.data-area]="area() || null"
1959
+ >
1869
1960
  <span class="ep-select-label" [id]="ids.label">{{ label() }}</span>
1870
1961
  <button
1871
1962
  #trigger
@@ -1892,7 +1983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
1892
1983
  [id]="ids.menu"
1893
1984
  [attr.aria-labelledby]="ids.label"
1894
1985
  tabindex="-1"
1895
- [attr.aria-activedescendant]="open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null"
1986
+ [attr.aria-activedescendant]="
1987
+ open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null
1988
+ "
1896
1989
  (keydown)="onMenuKeydown($event)"
1897
1990
  >
1898
1991
  @for (opt of options(); track opt.value; let i = $index) {
@@ -2229,7 +2322,11 @@ class ComboboxComponent {
2229
2322
  <!-- Klick auf die Feldfläche fokussiert das Input (cursor:text); das Input selbst
2230
2323
  ist direkt tastaturfokussierbar — daher a11y-Regeln hier gezielt aus. -->
2231
2324
  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
2232
- <div class="ep-combobox-control" [class.has-clear]="query().length > 0" (click)="focusInput()">
2325
+ <div
2326
+ class="ep-combobox-control"
2327
+ [class.has-clear]="query().length > 0"
2328
+ (click)="focusInput()"
2329
+ >
2233
2330
  @if (multi()) {
2234
2331
  @for (opt of selectedOptions(); track opt.value) {
2235
2332
  <span class="ep-combobox-token">
@@ -2255,7 +2352,9 @@ class ComboboxComponent {
2255
2352
  [attr.aria-expanded]="open()"
2256
2353
  [attr.aria-controls]="ids.menu"
2257
2354
  aria-autocomplete="list"
2258
- [attr.aria-activedescendant]="open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null"
2355
+ [attr.aria-activedescendant]="
2356
+ open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null
2357
+ "
2259
2358
  [placeholder]="placeholder()"
2260
2359
  [disabled]="disabled()"
2261
2360
  [value]="query()"
@@ -2265,13 +2364,23 @@ class ComboboxComponent {
2265
2364
  (blur)="markTouched()"
2266
2365
  />
2267
2366
  @if (query().length > 0) {
2268
- <button type="button" class="ep-combobox-clear" aria-label="Eingabe löschen" (click)="clear($event)">
2367
+ <button
2368
+ type="button"
2369
+ class="ep-combobox-clear"
2370
+ aria-label="Eingabe löschen"
2371
+ (click)="clear($event)"
2372
+ >
2269
2373
  <ng-icon name="heroXMark" size="16px" aria-hidden="true" />
2270
2374
  </button>
2271
2375
  }
2272
2376
  <ng-icon class="ep-select-caret" name="heroChevronDown" size="24px" aria-hidden="true" />
2273
2377
  </div>
2274
- <ul class="ep-combobox-menu" role="listbox" [id]="ids.menu" [attr.aria-labelledby]="ids.label">
2378
+ <ul
2379
+ class="ep-combobox-menu"
2380
+ role="listbox"
2381
+ [id]="ids.menu"
2382
+ [attr.aria-labelledby]="ids.label"
2383
+ >
2275
2384
  @for (opt of filtered(); track opt.value; let i = $index) {
2276
2385
  <!-- Listbox-Muster: Optionen bewusst nicht einzeln fokussierbar; Tastatur
2277
2386
  läuft über das Input (aria-activedescendant). -->
@@ -2290,7 +2399,9 @@ class ComboboxComponent {
2290
2399
  </li>
2291
2400
  }
2292
2401
  @if (!filtered().length) {
2293
- <li class="ep-combobox-empty" role="option" aria-disabled="true" aria-selected="false">{{ emptyText() }}</li>
2402
+ <li class="ep-combobox-empty" role="option" aria-disabled="true" aria-selected="false">
2403
+ {{ emptyText() }}
2404
+ </li>
2294
2405
  }
2295
2406
  </ul>
2296
2407
  </div>
@@ -2321,7 +2432,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2321
2432
  <!-- Klick auf die Feldfläche fokussiert das Input (cursor:text); das Input selbst
2322
2433
  ist direkt tastaturfokussierbar — daher a11y-Regeln hier gezielt aus. -->
2323
2434
  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
2324
- <div class="ep-combobox-control" [class.has-clear]="query().length > 0" (click)="focusInput()">
2435
+ <div
2436
+ class="ep-combobox-control"
2437
+ [class.has-clear]="query().length > 0"
2438
+ (click)="focusInput()"
2439
+ >
2325
2440
  @if (multi()) {
2326
2441
  @for (opt of selectedOptions(); track opt.value) {
2327
2442
  <span class="ep-combobox-token">
@@ -2347,7 +2462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2347
2462
  [attr.aria-expanded]="open()"
2348
2463
  [attr.aria-controls]="ids.menu"
2349
2464
  aria-autocomplete="list"
2350
- [attr.aria-activedescendant]="open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null"
2465
+ [attr.aria-activedescendant]="
2466
+ open() && activeIndex() >= 0 ? ids.option(activeIndex()) : null
2467
+ "
2351
2468
  [placeholder]="placeholder()"
2352
2469
  [disabled]="disabled()"
2353
2470
  [value]="query()"
@@ -2357,13 +2474,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2357
2474
  (blur)="markTouched()"
2358
2475
  />
2359
2476
  @if (query().length > 0) {
2360
- <button type="button" class="ep-combobox-clear" aria-label="Eingabe löschen" (click)="clear($event)">
2477
+ <button
2478
+ type="button"
2479
+ class="ep-combobox-clear"
2480
+ aria-label="Eingabe löschen"
2481
+ (click)="clear($event)"
2482
+ >
2361
2483
  <ng-icon name="heroXMark" size="16px" aria-hidden="true" />
2362
2484
  </button>
2363
2485
  }
2364
2486
  <ng-icon class="ep-select-caret" name="heroChevronDown" size="24px" aria-hidden="true" />
2365
2487
  </div>
2366
- <ul class="ep-combobox-menu" role="listbox" [id]="ids.menu" [attr.aria-labelledby]="ids.label">
2488
+ <ul
2489
+ class="ep-combobox-menu"
2490
+ role="listbox"
2491
+ [id]="ids.menu"
2492
+ [attr.aria-labelledby]="ids.label"
2493
+ >
2367
2494
  @for (opt of filtered(); track opt.value; let i = $index) {
2368
2495
  <!-- Listbox-Muster: Optionen bewusst nicht einzeln fokussierbar; Tastatur
2369
2496
  läuft über das Input (aria-activedescendant). -->
@@ -2382,7 +2509,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2382
2509
  </li>
2383
2510
  }
2384
2511
  @if (!filtered().length) {
2385
- <li class="ep-combobox-empty" role="option" aria-disabled="true" aria-selected="false">{{ emptyText() }}</li>
2512
+ <li class="ep-combobox-empty" role="option" aria-disabled="true" aria-selected="false">
2513
+ {{ emptyText() }}
2514
+ </li>
2386
2515
  }
2387
2516
  </ul>
2388
2517
  </div>
@@ -2769,6 +2898,7 @@ class FooterBottomComponent {
2769
2898
  }
2770
2899
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FooterBottomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2771
2900
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FooterBottomComponent, isStandalone: true, selector: "cds-footer-bottom", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, support: { classPropertyName: "support", publicName: "support", isSignal: true, isRequired: false, transformFunction: null }, legalLinks: { classPropertyName: "legalLinks", publicName: "legalLinks", isSignal: true, isRequired: false, transformFunction: null }, socialLinks: { classPropertyName: "socialLinks", publicName: "socialLinks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "footer-btm" }, ngImport: i0, template: `
2901
+ <!-- prettier-ignore -->
2772
2902
  <span
2773
2903
  >{{ copyright() }}@if (version()) {<span aria-hidden="true">&nbsp;·&nbsp;</span>{{ version() }}}</span
2774
2904
  >
@@ -2785,7 +2915,12 @@ class FooterBottomComponent {
2785
2915
  currentColor würde die Link-/n-300-Farbe erben (LinkedIn erschiene blau). -->
2786
2916
  <nav class="footer-social" aria-label="Soziale Netzwerke">
2787
2917
  @for (s of socialLinks(); track $index) {
2788
- <a [href]="s.href" target="_blank" rel="noopener" [attr.aria-label]="socialLabel(s) + ' (öffnet in neuem Tab)'">
2918
+ <a
2919
+ [href]="s.href"
2920
+ target="_blank"
2921
+ rel="noopener"
2922
+ [attr.aria-label]="socialLabel(s) + ' (öffnet in neuem Tab)'"
2923
+ >
2789
2924
  <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
2790
2925
  <path [attr.d]="socialPath(s)" />
2791
2926
  </svg>
@@ -2802,6 +2937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2802
2937
  changeDetection: ChangeDetectionStrategy.OnPush,
2803
2938
  host: { class: 'footer-btm' },
2804
2939
  template: `
2940
+ <!-- prettier-ignore -->
2805
2941
  <span
2806
2942
  >{{ copyright() }}@if (version()) {<span aria-hidden="true">&nbsp;·&nbsp;</span>{{ version() }}}</span
2807
2943
  >
@@ -2818,7 +2954,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
2818
2954
  currentColor würde die Link-/n-300-Farbe erben (LinkedIn erschiene blau). -->
2819
2955
  <nav class="footer-social" aria-label="Soziale Netzwerke">
2820
2956
  @for (s of socialLinks(); track $index) {
2821
- <a [href]="s.href" target="_blank" rel="noopener" [attr.aria-label]="socialLabel(s) + ' (öffnet in neuem Tab)'">
2957
+ <a
2958
+ [href]="s.href"
2959
+ target="_blank"
2960
+ rel="noopener"
2961
+ [attr.aria-label]="socialLabel(s) + ' (öffnet in neuem Tab)'"
2962
+ >
2822
2963
  <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
2823
2964
  <path [attr.d]="socialPath(s)" />
2824
2965
  </svg>
@@ -3231,10 +3372,25 @@ class LogoCarouselComponent {
3231
3372
  [attr.aria-label]="paused() ? 'Abspielen' : 'Pausieren'"
3232
3373
  (click)="togglePause()"
3233
3374
  >
3234
- <svg class="icon-pause" width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
3235
- <rect x="3" y="2" width="3" height="10" rx="1" /><rect x="8" y="2" width="3" height="10" rx="1" />
3375
+ <svg
3376
+ class="icon-pause"
3377
+ width="14"
3378
+ height="14"
3379
+ viewBox="0 0 14 14"
3380
+ fill="currentColor"
3381
+ aria-hidden="true"
3382
+ >
3383
+ <rect x="3" y="2" width="3" height="10" rx="1" />
3384
+ <rect x="8" y="2" width="3" height="10" rx="1" />
3236
3385
  </svg>
3237
- <svg class="icon-play" width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
3386
+ <svg
3387
+ class="icon-play"
3388
+ width="14"
3389
+ height="14"
3390
+ viewBox="0 0 14 14"
3391
+ fill="currentColor"
3392
+ aria-hidden="true"
3393
+ >
3238
3394
  <path d="M4 2.5v9l7-4.5z" />
3239
3395
  </svg>
3240
3396
  </button>
@@ -3295,10 +3451,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3295
3451
  [attr.aria-label]="paused() ? 'Abspielen' : 'Pausieren'"
3296
3452
  (click)="togglePause()"
3297
3453
  >
3298
- <svg class="icon-pause" width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
3299
- <rect x="3" y="2" width="3" height="10" rx="1" /><rect x="8" y="2" width="3" height="10" rx="1" />
3454
+ <svg
3455
+ class="icon-pause"
3456
+ width="14"
3457
+ height="14"
3458
+ viewBox="0 0 14 14"
3459
+ fill="currentColor"
3460
+ aria-hidden="true"
3461
+ >
3462
+ <rect x="3" y="2" width="3" height="10" rx="1" />
3463
+ <rect x="8" y="2" width="3" height="10" rx="1" />
3300
3464
  </svg>
3301
- <svg class="icon-play" width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true">
3465
+ <svg
3466
+ class="icon-play"
3467
+ width="14"
3468
+ height="14"
3469
+ viewBox="0 0 14 14"
3470
+ fill="currentColor"
3471
+ aria-hidden="true"
3472
+ >
3302
3473
  <path d="M4 2.5v9l7-4.5z" />
3303
3474
  </svg>
3304
3475
  </button>
@@ -3428,13 +3599,39 @@ class CarouselComponent {
3428
3599
  }
3429
3600
  </div>
3430
3601
 
3431
- <button class="img-slider-btn img-slider-prev" type="button" aria-label="Vorherige Slide" (click)="prev()">
3432
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
3602
+ <button
3603
+ class="img-slider-btn img-slider-prev"
3604
+ type="button"
3605
+ aria-label="Vorherige Slide"
3606
+ (click)="prev()"
3607
+ >
3608
+ <svg
3609
+ width="24"
3610
+ height="24"
3611
+ viewBox="0 0 24 24"
3612
+ fill="none"
3613
+ stroke="currentColor"
3614
+ stroke-width="1.5"
3615
+ aria-hidden="true"
3616
+ >
3433
3617
  <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
3434
3618
  </svg>
3435
3619
  </button>
3436
- <button class="img-slider-btn img-slider-next" type="button" aria-label="Nächste Slide" (click)="next()">
3437
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
3620
+ <button
3621
+ class="img-slider-btn img-slider-next"
3622
+ type="button"
3623
+ aria-label="Nächste Slide"
3624
+ (click)="next()"
3625
+ >
3626
+ <svg
3627
+ width="24"
3628
+ height="24"
3629
+ viewBox="0 0 24 24"
3630
+ fill="none"
3631
+ stroke="currentColor"
3632
+ stroke-width="1.5"
3633
+ aria-hidden="true"
3634
+ >
3438
3635
  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3439
3636
  </svg>
3440
3637
  </button>
@@ -3492,13 +3689,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3492
3689
  }
3493
3690
  </div>
3494
3691
 
3495
- <button class="img-slider-btn img-slider-prev" type="button" aria-label="Vorherige Slide" (click)="prev()">
3496
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
3692
+ <button
3693
+ class="img-slider-btn img-slider-prev"
3694
+ type="button"
3695
+ aria-label="Vorherige Slide"
3696
+ (click)="prev()"
3697
+ >
3698
+ <svg
3699
+ width="24"
3700
+ height="24"
3701
+ viewBox="0 0 24 24"
3702
+ fill="none"
3703
+ stroke="currentColor"
3704
+ stroke-width="1.5"
3705
+ aria-hidden="true"
3706
+ >
3497
3707
  <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
3498
3708
  </svg>
3499
3709
  </button>
3500
- <button class="img-slider-btn img-slider-next" type="button" aria-label="Nächste Slide" (click)="next()">
3501
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
3710
+ <button
3711
+ class="img-slider-btn img-slider-next"
3712
+ type="button"
3713
+ aria-label="Nächste Slide"
3714
+ (click)="next()"
3715
+ >
3716
+ <svg
3717
+ width="24"
3718
+ height="24"
3719
+ viewBox="0 0 24 24"
3720
+ fill="none"
3721
+ stroke="currentColor"
3722
+ stroke-width="1.5"
3723
+ aria-hidden="true"
3724
+ >
3502
3725
  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
3503
3726
  </svg>
3504
3727
  </button>
@@ -3595,7 +3818,12 @@ class ThemeSegmentComponent {
3595
3818
  const cs = getComputedStyle(bar);
3596
3819
  const bx = parseFloat(cs.borderLeftWidth) || 0;
3597
3820
  const by = parseFloat(cs.borderTopWidth) || 0;
3598
- return { width: r.width, height: r.height, x: r.left - barRect.left - bx, y: r.top - barRect.top - by };
3821
+ return {
3822
+ width: r.width,
3823
+ height: r.height,
3824
+ x: r.left - barRect.left - bx,
3825
+ y: r.top - barRect.top - by,
3826
+ };
3599
3827
  }
3600
3828
  /** Gemessene Geometrie auf den Thumb schreiben (reines Schreiben, kein Lesen). */
3601
3829
  applyThumb(rect) {
@@ -3673,7 +3901,12 @@ class ThemeSelectComponent {
3673
3901
  }
3674
3902
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ThemeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3675
3903
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ThemeSelectComponent, isStandalone: true, selector: "cds-theme-select", inputs: { showSystem: { classPropertyName: "showSystem", publicName: "showSystem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
3676
- <cds-select label="Farbthema" [options]="options()" [value]="svc.mode()" (valueChange)="onChange($event)" />
3904
+ <cds-select
3905
+ label="Farbthema"
3906
+ [options]="options()"
3907
+ [value]="svc.mode()"
3908
+ (valueChange)="onChange($event)"
3909
+ />
3677
3910
  `, isInline: true, dependencies: [{ kind: "component", type: SelectComponent, selector: "cds-select", inputs: ["label", "options", "value", "area", "placeholder", "disabled", "name"], outputs: ["valueChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3678
3911
  }
3679
3912
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ThemeSelectComponent, decorators: [{
@@ -3683,7 +3916,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3683
3916
  changeDetection: ChangeDetectionStrategy.OnPush,
3684
3917
  imports: [SelectComponent],
3685
3918
  template: `
3686
- <cds-select label="Farbthema" [options]="options()" [value]="svc.mode()" (valueChange)="onChange($event)" />
3919
+ <cds-select
3920
+ label="Farbthema"
3921
+ [options]="options()"
3922
+ [value]="svc.mode()"
3923
+ (valueChange)="onChange($event)"
3924
+ />
3687
3925
  `,
3688
3926
  }]
3689
3927
  }], propDecorators: { showSystem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSystem", required: false }] }] } });
@@ -3691,16 +3929,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3691
3929
  /** Bereichs-Glyphe je Markenbereich (co/ki/es/wo). */
3692
3930
  const CDS_AREA_ICONS = {
3693
3931
  // co-building — Corporate / Unternehmen – Bereichs-Glyphe (Gebäude)
3694
- co: { viewBox: "0 0 24 24", body: "<path d=\"M18.1513 4.54221C18.4965 4.54624 18.773 4.82931 18.769 5.17446C18.765 5.51348 18.4921 5.78462 18.1553 5.79038L17.9998 19.1L18.5877 19.1069C18.9328 19.1109 19.2094 19.394 19.2053 19.7391C19.2012 20.0842 18.9182 20.3608 18.5731 20.3568L5.22927 20.201C4.8842 20.1969 4.60772 19.9137 4.61162 19.5687C4.61565 19.2235 4.89872 18.947 5.24387 18.951L5.83172 18.9579L5.98717 5.64827C5.65081 5.63442 5.38409 5.35706 5.38805 5.01818C5.39208 4.67308 5.67522 4.39657 6.0203 4.40052L18.1513 4.54221ZM13.7415 16.9457C13.7433 16.7887 13.6176 16.6592 13.4607 16.6572L10.4277 16.6218C10.2706 16.6199 10.141 16.7465 10.1392 16.9036L10.1146 19.0079L13.7169 19.05L13.7415 16.9457ZM10.7804 12.3424C11.1256 12.3464 11.4021 12.6295 11.3981 12.9747C11.394 13.3198 11.111 13.5963 10.7658 13.5923L9.55301 13.5781C9.2079 13.5741 8.93132 13.291 8.93535 12.9459C8.9394 12.6008 9.2225 12.3242 9.56761 12.3282L10.7804 12.3424ZM14.4198 12.3849C14.765 12.3889 15.0415 12.672 15.0375 13.0172C15.0334 13.3623 14.7504 13.6388 14.4052 13.6348L13.1924 13.6207C12.8473 13.6166 12.5707 13.3335 12.5748 12.9884C12.5788 12.6433 12.8619 12.3667 13.207 12.3707L14.4198 12.3849ZM10.8088 9.9158C11.1538 9.91983 11.4302 10.2031 11.4264 10.5481C11.4224 10.8932 11.1393 11.1698 10.7942 11.1657L9.58135 11.1516C9.23624 11.1475 8.95966 10.8644 8.96369 10.5193C8.96793 10.1744 9.25097 9.89766 9.59595 9.90164L10.8088 9.9158ZM14.4482 9.95831C14.7932 9.96234 15.0696 10.2456 15.0658 10.5906C15.0618 10.9357 14.7787 11.2123 14.4336 11.2082L13.2207 11.1941C12.8756 11.19 12.5991 10.9069 12.6031 10.5618C12.6073 10.2168 12.8903 9.94013 13.2353 9.94415L14.4482 9.95831ZM10.8371 7.49019C11.1822 7.49422 11.4588 7.77729 11.4547 8.12245C11.4506 8.4675 11.1676 8.74413 10.8225 8.7401L9.60968 8.72594C9.26464 8.72186 8.98811 8.43871 8.99202 8.09368C8.99605 7.74856 9.27916 7.47204 9.62428 7.47602L10.8371 7.49019ZM14.4765 7.53269C14.8216 7.53673 15.0982 7.8198 15.0941 8.16495C15.09 8.51001 14.807 8.78664 14.4619 8.78261L13.2491 8.76844C12.904 8.7644 12.6275 8.48124 12.6314 8.13619C12.6355 7.79104 12.9185 7.51451 13.2637 7.51853L14.4765 7.53269ZM14.9668 19.0646L16.7499 19.0854L16.9054 5.77774L7.23706 5.66482L7.08164 18.9725L8.86472 18.9933L8.8893 16.889C8.89919 16.0416 9.59489 15.362 10.4423 15.3719L13.4753 15.4073C14.3225 15.4174 15.0013 16.113 14.9914 16.9603L14.9668 19.0646Z\" fill=\"currentColor\"/>" },
3932
+ co: {
3933
+ viewBox: '0 0 24 24',
3934
+ body: '<path d="M18.1513 4.54221C18.4965 4.54624 18.773 4.82931 18.769 5.17446C18.765 5.51348 18.4921 5.78462 18.1553 5.79038L17.9998 19.1L18.5877 19.1069C18.9328 19.1109 19.2094 19.394 19.2053 19.7391C19.2012 20.0842 18.9182 20.3608 18.5731 20.3568L5.22927 20.201C4.8842 20.1969 4.60772 19.9137 4.61162 19.5687C4.61565 19.2235 4.89872 18.947 5.24387 18.951L5.83172 18.9579L5.98717 5.64827C5.65081 5.63442 5.38409 5.35706 5.38805 5.01818C5.39208 4.67308 5.67522 4.39657 6.0203 4.40052L18.1513 4.54221ZM13.7415 16.9457C13.7433 16.7887 13.6176 16.6592 13.4607 16.6572L10.4277 16.6218C10.2706 16.6199 10.141 16.7465 10.1392 16.9036L10.1146 19.0079L13.7169 19.05L13.7415 16.9457ZM10.7804 12.3424C11.1256 12.3464 11.4021 12.6295 11.3981 12.9747C11.394 13.3198 11.111 13.5963 10.7658 13.5923L9.55301 13.5781C9.2079 13.5741 8.93132 13.291 8.93535 12.9459C8.9394 12.6008 9.2225 12.3242 9.56761 12.3282L10.7804 12.3424ZM14.4198 12.3849C14.765 12.3889 15.0415 12.672 15.0375 13.0172C15.0334 13.3623 14.7504 13.6388 14.4052 13.6348L13.1924 13.6207C12.8473 13.6166 12.5707 13.3335 12.5748 12.9884C12.5788 12.6433 12.8619 12.3667 13.207 12.3707L14.4198 12.3849ZM10.8088 9.9158C11.1538 9.91983 11.4302 10.2031 11.4264 10.5481C11.4224 10.8932 11.1393 11.1698 10.7942 11.1657L9.58135 11.1516C9.23624 11.1475 8.95966 10.8644 8.96369 10.5193C8.96793 10.1744 9.25097 9.89766 9.59595 9.90164L10.8088 9.9158ZM14.4482 9.95831C14.7932 9.96234 15.0696 10.2456 15.0658 10.5906C15.0618 10.9357 14.7787 11.2123 14.4336 11.2082L13.2207 11.1941C12.8756 11.19 12.5991 10.9069 12.6031 10.5618C12.6073 10.2168 12.8903 9.94013 13.2353 9.94415L14.4482 9.95831ZM10.8371 7.49019C11.1822 7.49422 11.4588 7.77729 11.4547 8.12245C11.4506 8.4675 11.1676 8.74413 10.8225 8.7401L9.60968 8.72594C9.26464 8.72186 8.98811 8.43871 8.99202 8.09368C8.99605 7.74856 9.27916 7.47204 9.62428 7.47602L10.8371 7.49019ZM14.4765 7.53269C14.8216 7.53673 15.0982 7.8198 15.0941 8.16495C15.09 8.51001 14.807 8.78664 14.4619 8.78261L13.2491 8.76844C12.904 8.7644 12.6275 8.48124 12.6314 8.13619C12.6355 7.79104 12.9185 7.51451 13.2637 7.51853L14.4765 7.53269ZM14.9668 19.0646L16.7499 19.0854L16.9054 5.77774L7.23706 5.66482L7.08164 18.9725L8.86472 18.9933L8.8893 16.889C8.89919 16.0416 9.59489 15.362 10.4423 15.3719L13.4753 15.4073C14.3225 15.4174 15.0013 16.113 14.9914 16.9603L14.9668 19.0646Z" fill="currentColor"/>',
3935
+ },
3695
3936
  // ki-bot — Angewandte KI – Bereichs-Glyphe (Tablet/Bot)
3696
- ki: { viewBox: "0 0 24 24", body: "<path d=\"M18.1682 10.4063C18.1682 9.64701 17.5524 9.03148 16.7932 9.03126H7.20728C6.44789 9.03126 5.83228 9.64687 5.83228 10.4063V18.25C5.83228 19.0094 6.44788 19.625 7.20728 19.625H16.7932C17.5524 19.6248 18.1682 19.0093 18.1682 18.25V10.4063ZM19.4182 18.25C19.4182 19.6996 18.2428 20.8748 16.7932 20.875H7.20728C5.75753 20.875 4.58228 19.6998 4.58228 18.25V10.4063C4.58228 8.95651 5.75753 7.78126 7.20728 7.78126H16.7932C18.2428 7.78148 19.4182 8.95665 19.4182 10.4063V18.25Z\" fill=\"currentColor\"/><path d=\"M12.4325 5.0625C12.4325 4.6828 12.1247 4.375 11.745 4.375C11.3653 4.375 11.0575 4.6828 11.0575 5.0625C11.0575 5.4422 11.3653 5.75 11.745 5.75C12.1247 5.75 12.4325 5.4422 12.4325 5.0625ZM13.6825 5.0625C13.6825 6.13255 12.815 7 11.745 7C10.6749 7 9.80746 6.13255 9.80746 5.0625C9.80746 3.99245 10.6749 3.125 11.745 3.125C12.815 3.125 13.6825 3.99245 13.6825 5.0625Z\" fill=\"currentColor\"/><path d=\"M9.31253 12.8539C9.31253 12.4742 9.00473 12.1664 8.62503 12.1664C8.24533 12.1664 7.93753 12.4742 7.93753 12.8539C7.93753 13.2336 8.24533 13.5414 8.62503 13.5414C9.00473 13.5414 9.31253 13.2336 9.31253 12.8539ZM10.5625 12.8539C10.5625 13.9239 9.69508 14.7914 8.62503 14.7914C7.55498 14.7914 6.68753 13.9239 6.68753 12.8539C6.68753 11.7838 7.55498 10.9164 8.62503 10.9164C9.69508 10.9164 10.5625 11.7838 10.5625 12.8539Z\" fill=\"currentColor\"/><path d=\"M16.0625 12.8539C16.0625 12.4742 15.7547 12.1664 15.375 12.1664C14.9953 12.1664 14.6875 12.4742 14.6875 12.8539C14.6875 13.2336 14.9953 13.5414 15.375 13.5414C15.7547 13.5414 16.0625 13.2336 16.0625 12.8539ZM17.3125 12.8539C17.3125 13.9239 16.4451 14.7914 15.375 14.7914C14.305 14.7914 13.4375 13.9239 13.4375 12.8539C13.4375 11.7838 14.305 10.9164 15.375 10.9164C16.4451 10.9164 17.3125 11.7838 17.3125 12.8539Z\" fill=\"currentColor\"/><path d=\"M8.25003 16.125C8.25003 16.5392 7.91424 16.875 7.50003 16.875C7.08582 16.875 6.75003 16.5392 6.75003 16.125C6.75003 15.7108 7.08582 15.375 7.50003 15.375C7.91424 15.375 8.25003 15.7108 8.25003 16.125Z\" fill=\"currentColor\"/><path d=\"M10.3125 17.4C10.3125 17.8142 9.97674 18.15 9.56253 18.15C9.14832 18.15 8.81253 17.8142 8.81253 17.4C8.81253 16.9858 9.14832 16.65 9.56253 16.65C9.97674 16.65 10.3125 16.9858 10.3125 17.4Z\" fill=\"currentColor\"/><path d=\"M15.1875 17.4C15.1875 17.8142 14.8517 18.15 14.4375 18.15C14.0233 18.15 13.6875 17.8142 13.6875 17.4C13.6875 16.9858 14.0233 16.65 14.4375 16.65C14.8517 16.65 15.1875 16.9858 15.1875 17.4Z\" fill=\"currentColor\"/><path d=\"M12.75 17.55C12.75 17.9642 12.4142 18.3 12 18.3C11.5858 18.3 11.25 17.9642 11.25 17.55C11.25 17.1358 11.5858 16.8 12 16.8C12.4142 16.8 12.75 17.1358 12.75 17.55Z\" fill=\"currentColor\"/><path d=\"M17.25 16.125C17.25 16.5392 16.9142 16.875 16.5 16.875C16.0858 16.875 15.75 16.5392 15.75 16.125C15.75 15.7108 16.0858 15.375 16.5 15.375C16.9142 15.375 17.25 15.7108 17.25 16.125Z\" fill=\"currentColor\"/><path d=\"M11.2108 8.30187V6.59484C11.2108 6.24966 11.4906 5.96984 11.8358 5.96984C12.181 5.96984 12.4608 6.24966 12.4608 6.59484V8.30187C12.4607 8.64699 12.1809 8.92687 11.8358 8.92687C11.4907 8.92687 11.2109 8.64699 11.2108 8.30187Z\" fill=\"currentColor\"/>" },
3937
+ ki: {
3938
+ viewBox: '0 0 24 24',
3939
+ body: '<path d="M18.1682 10.4063C18.1682 9.64701 17.5524 9.03148 16.7932 9.03126H7.20728C6.44789 9.03126 5.83228 9.64687 5.83228 10.4063V18.25C5.83228 19.0094 6.44788 19.625 7.20728 19.625H16.7932C17.5524 19.6248 18.1682 19.0093 18.1682 18.25V10.4063ZM19.4182 18.25C19.4182 19.6996 18.2428 20.8748 16.7932 20.875H7.20728C5.75753 20.875 4.58228 19.6998 4.58228 18.25V10.4063C4.58228 8.95651 5.75753 7.78126 7.20728 7.78126H16.7932C18.2428 7.78148 19.4182 8.95665 19.4182 10.4063V18.25Z" fill="currentColor"/><path d="M12.4325 5.0625C12.4325 4.6828 12.1247 4.375 11.745 4.375C11.3653 4.375 11.0575 4.6828 11.0575 5.0625C11.0575 5.4422 11.3653 5.75 11.745 5.75C12.1247 5.75 12.4325 5.4422 12.4325 5.0625ZM13.6825 5.0625C13.6825 6.13255 12.815 7 11.745 7C10.6749 7 9.80746 6.13255 9.80746 5.0625C9.80746 3.99245 10.6749 3.125 11.745 3.125C12.815 3.125 13.6825 3.99245 13.6825 5.0625Z" fill="currentColor"/><path d="M9.31253 12.8539C9.31253 12.4742 9.00473 12.1664 8.62503 12.1664C8.24533 12.1664 7.93753 12.4742 7.93753 12.8539C7.93753 13.2336 8.24533 13.5414 8.62503 13.5414C9.00473 13.5414 9.31253 13.2336 9.31253 12.8539ZM10.5625 12.8539C10.5625 13.9239 9.69508 14.7914 8.62503 14.7914C7.55498 14.7914 6.68753 13.9239 6.68753 12.8539C6.68753 11.7838 7.55498 10.9164 8.62503 10.9164C9.69508 10.9164 10.5625 11.7838 10.5625 12.8539Z" fill="currentColor"/><path d="M16.0625 12.8539C16.0625 12.4742 15.7547 12.1664 15.375 12.1664C14.9953 12.1664 14.6875 12.4742 14.6875 12.8539C14.6875 13.2336 14.9953 13.5414 15.375 13.5414C15.7547 13.5414 16.0625 13.2336 16.0625 12.8539ZM17.3125 12.8539C17.3125 13.9239 16.4451 14.7914 15.375 14.7914C14.305 14.7914 13.4375 13.9239 13.4375 12.8539C13.4375 11.7838 14.305 10.9164 15.375 10.9164C16.4451 10.9164 17.3125 11.7838 17.3125 12.8539Z" fill="currentColor"/><path d="M8.25003 16.125C8.25003 16.5392 7.91424 16.875 7.50003 16.875C7.08582 16.875 6.75003 16.5392 6.75003 16.125C6.75003 15.7108 7.08582 15.375 7.50003 15.375C7.91424 15.375 8.25003 15.7108 8.25003 16.125Z" fill="currentColor"/><path d="M10.3125 17.4C10.3125 17.8142 9.97674 18.15 9.56253 18.15C9.14832 18.15 8.81253 17.8142 8.81253 17.4C8.81253 16.9858 9.14832 16.65 9.56253 16.65C9.97674 16.65 10.3125 16.9858 10.3125 17.4Z" fill="currentColor"/><path d="M15.1875 17.4C15.1875 17.8142 14.8517 18.15 14.4375 18.15C14.0233 18.15 13.6875 17.8142 13.6875 17.4C13.6875 16.9858 14.0233 16.65 14.4375 16.65C14.8517 16.65 15.1875 16.9858 15.1875 17.4Z" fill="currentColor"/><path d="M12.75 17.55C12.75 17.9642 12.4142 18.3 12 18.3C11.5858 18.3 11.25 17.9642 11.25 17.55C11.25 17.1358 11.5858 16.8 12 16.8C12.4142 16.8 12.75 17.1358 12.75 17.55Z" fill="currentColor"/><path d="M17.25 16.125C17.25 16.5392 16.9142 16.875 16.5 16.875C16.0858 16.875 15.75 16.5392 15.75 16.125C15.75 15.7108 16.0858 15.375 16.5 15.375C16.9142 15.375 17.25 15.7108 17.25 16.125Z" fill="currentColor"/><path d="M11.2108 8.30187V6.59484C11.2108 6.24966 11.4906 5.96984 11.8358 5.96984C12.181 5.96984 12.4608 6.24966 12.4608 6.59484V8.30187C12.4607 8.64699 12.1809 8.92687 11.8358 8.92687C11.4907 8.92687 11.2109 8.64699 11.2108 8.30187Z" fill="currentColor"/>',
3940
+ },
3697
3941
  // es-window-check — Effektive Software – Bereichs-Glyphe (Fenster + Check)
3698
- es: { viewBox: "0 0 24 24", body: "<path d=\"M4.50018 9.27394C4.15501 9.27394 3.87518 8.99412 3.87518 8.64894C3.87518 8.30376 4.15501 8.02394 4.50018 8.02394H19.1808C19.526 8.02394 19.8058 8.30376 19.8058 8.64894C19.8058 8.99412 19.526 9.27394 19.1808 9.27394H4.50018Z\" fill=\"currentColor\"/><path d=\"M18.875 6.5C18.875 5.74061 18.2594 5.125 17.5 5.125H6.5C5.74061 5.125 5.125 5.74061 5.125 6.5V17.5C5.125 18.2594 5.74061 18.875 6.5 18.875H17.5C18.2594 18.875 18.875 18.2594 18.875 17.5V6.5ZM20.125 17.5C20.125 18.9497 18.9497 20.125 17.5 20.125H6.5C5.05025 20.125 3.875 18.9497 3.875 17.5V6.5C3.875 5.05025 5.05025 3.875 6.5 3.875H17.5C18.9497 3.875 20.125 5.05025 20.125 6.5V17.5Z\" fill=\"currentColor\"/><path d=\"M7.5 6.59999C7.5 7.0142 7.16421 7.34999 6.75 7.34999C6.33579 7.34999 6 7.0142 6 6.59999C6 6.18578 6.33579 5.84999 6.75 5.84999C7.16421 5.84999 7.5 6.18578 7.5 6.59999Z\" fill=\"currentColor\"/><path d=\"M9.89996 6.59999C9.89996 7.0142 9.56418 7.34999 9.14996 7.34999C8.73575 7.34999 8.39996 7.0142 8.39996 6.59999C8.39996 6.18578 8.73575 5.84999 9.14996 5.84999C9.56418 5.84999 9.89996 6.18578 9.89996 6.59999Z\" fill=\"currentColor\"/><path d=\"M12.2999 6.59999C12.2999 7.0142 11.9641 7.34999 11.5499 7.34999C11.1357 7.34999 10.7999 7.0142 10.7999 6.59999C10.7999 6.18578 11.1357 5.84999 11.5499 5.84999C11.9641 5.84999 12.2999 6.18578 12.2999 6.59999Z\" fill=\"currentColor\"/><path d=\"M15.4175 10.892C15.6768 10.6644 16.0716 10.6904 16.2993 10.9496C16.5269 11.2089 16.5019 11.6037 16.2427 11.8314L11.5044 15.9945C10.9598 16.4731 10.1372 16.4466 9.62454 15.934L7.40872 13.7182C7.16508 13.4741 7.16486 13.0783 7.40872 12.8344C7.6528 12.5903 8.04941 12.5903 8.29349 12.8344L10.5083 15.0502C10.5548 15.0967 10.6297 15.0993 10.6792 15.0561L15.4175 10.892Z\" fill=\"currentColor\"/>" },
3942
+ es: {
3943
+ viewBox: '0 0 24 24',
3944
+ body: '<path d="M4.50018 9.27394C4.15501 9.27394 3.87518 8.99412 3.87518 8.64894C3.87518 8.30376 4.15501 8.02394 4.50018 8.02394H19.1808C19.526 8.02394 19.8058 8.30376 19.8058 8.64894C19.8058 8.99412 19.526 9.27394 19.1808 9.27394H4.50018Z" fill="currentColor"/><path d="M18.875 6.5C18.875 5.74061 18.2594 5.125 17.5 5.125H6.5C5.74061 5.125 5.125 5.74061 5.125 6.5V17.5C5.125 18.2594 5.74061 18.875 6.5 18.875H17.5C18.2594 18.875 18.875 18.2594 18.875 17.5V6.5ZM20.125 17.5C20.125 18.9497 18.9497 20.125 17.5 20.125H6.5C5.05025 20.125 3.875 18.9497 3.875 17.5V6.5C3.875 5.05025 5.05025 3.875 6.5 3.875H17.5C18.9497 3.875 20.125 5.05025 20.125 6.5V17.5Z" fill="currentColor"/><path d="M7.5 6.59999C7.5 7.0142 7.16421 7.34999 6.75 7.34999C6.33579 7.34999 6 7.0142 6 6.59999C6 6.18578 6.33579 5.84999 6.75 5.84999C7.16421 5.84999 7.5 6.18578 7.5 6.59999Z" fill="currentColor"/><path d="M9.89996 6.59999C9.89996 7.0142 9.56418 7.34999 9.14996 7.34999C8.73575 7.34999 8.39996 7.0142 8.39996 6.59999C8.39996 6.18578 8.73575 5.84999 9.14996 5.84999C9.56418 5.84999 9.89996 6.18578 9.89996 6.59999Z" fill="currentColor"/><path d="M12.2999 6.59999C12.2999 7.0142 11.9641 7.34999 11.5499 7.34999C11.1357 7.34999 10.7999 7.0142 10.7999 6.59999C10.7999 6.18578 11.1357 5.84999 11.5499 5.84999C11.9641 5.84999 12.2999 6.18578 12.2999 6.59999Z" fill="currentColor"/><path d="M15.4175 10.892C15.6768 10.6644 16.0716 10.6904 16.2993 10.9496C16.5269 11.2089 16.5019 11.6037 16.2427 11.8314L11.5044 15.9945C10.9598 16.4731 10.1372 16.4466 9.62454 15.934L7.40872 13.7182C7.16508 13.4741 7.16486 13.0783 7.40872 12.8344C7.6528 12.5903 8.04941 12.5903 8.29349 12.8344L10.5083 15.0502C10.5548 15.0967 10.6297 15.0993 10.6792 15.0561L15.4175 10.892Z" fill="currentColor"/>',
3945
+ },
3699
3946
  // wo-network — Wirksame Organisationen – Bereichs-Glyphe (Netzwerk)
3700
- wo: { viewBox: "0 0 24 24", body: "<path d=\"M13.4753 7.64954C13.4751 6.83509 12.8143 6.17493 11.9998 6.17493C11.1855 6.17515 10.5254 6.83523 10.5251 7.64954C10.5251 8.46403 11.1853 9.1249 11.9998 9.12512C12.8144 9.12512 13.4753 8.46417 13.4753 7.64954ZM14.7253 7.64954C14.7253 9.15452 13.5047 10.3751 11.9998 10.3751C10.495 10.3749 9.27515 9.15439 9.27515 7.64954C9.27537 6.14488 10.4951 4.92515 11.9998 4.92493C13.5046 4.92493 14.7251 6.14474 14.7253 7.64954Z\" fill=\"currentColor\"/><path d=\"M8.0752 16.3497C8.07497 15.5352 7.4141 14.875 6.59961 14.875C5.7853 14.8753 5.12522 15.5354 5.125 16.3497C5.125 17.1641 5.78517 17.825 6.59961 17.8252C7.41424 17.8252 8.0752 17.1643 8.0752 16.3497ZM9.3252 16.3497C9.3252 17.8546 8.1046 19.0752 6.59961 19.0752C5.09481 19.075 3.875 17.8545 3.875 16.3497C3.87522 14.845 5.09495 13.6253 6.59961 13.625C8.10446 13.625 9.32497 14.8449 9.3252 16.3497Z\" fill=\"currentColor\"/><path d=\"M18.8753 16.3497C18.8751 15.5352 18.2142 14.875 17.3997 14.875C16.5854 14.8753 15.9253 15.5354 15.9251 16.3497C15.9251 17.1641 16.5853 17.825 17.3997 17.8252C18.2144 17.8252 18.8753 17.1643 18.8753 16.3497ZM20.1253 16.3497C20.1253 17.8546 18.9047 19.0752 17.3997 19.0752C15.8949 19.075 14.6751 17.8545 14.6751 16.3497C14.6753 14.845 15.8951 13.6253 17.3997 13.625C18.9046 13.625 20.1251 14.8449 20.1253 16.3497Z\" fill=\"currentColor\"/><path d=\"M12.0005 9.75L12.4419 10.1924L7.79251 14.8418L7.35013 14.4004L6.90775 13.958L11.5581 9.30762L12.0005 9.75Z\" fill=\"currentColor\"/><path d=\"M12.0005 9.75L11.5583 10.1924L16.2078 14.8418L16.6501 14.4004L17.0925 13.958L12.4421 9.30762L12.0005 9.75Z\" fill=\"currentColor\"/><path d=\"M8.85065 16.9751V15.7251L15.4503 15.7251V16.9751L8.85065 16.9751Z\" fill=\"currentColor\"/>" },
3947
+ wo: {
3948
+ viewBox: '0 0 24 24',
3949
+ body: '<path d="M13.4753 7.64954C13.4751 6.83509 12.8143 6.17493 11.9998 6.17493C11.1855 6.17515 10.5254 6.83523 10.5251 7.64954C10.5251 8.46403 11.1853 9.1249 11.9998 9.12512C12.8144 9.12512 13.4753 8.46417 13.4753 7.64954ZM14.7253 7.64954C14.7253 9.15452 13.5047 10.3751 11.9998 10.3751C10.495 10.3749 9.27515 9.15439 9.27515 7.64954C9.27537 6.14488 10.4951 4.92515 11.9998 4.92493C13.5046 4.92493 14.7251 6.14474 14.7253 7.64954Z" fill="currentColor"/><path d="M8.0752 16.3497C8.07497 15.5352 7.4141 14.875 6.59961 14.875C5.7853 14.8753 5.12522 15.5354 5.125 16.3497C5.125 17.1641 5.78517 17.825 6.59961 17.8252C7.41424 17.8252 8.0752 17.1643 8.0752 16.3497ZM9.3252 16.3497C9.3252 17.8546 8.1046 19.0752 6.59961 19.0752C5.09481 19.075 3.875 17.8545 3.875 16.3497C3.87522 14.845 5.09495 13.6253 6.59961 13.625C8.10446 13.625 9.32497 14.8449 9.3252 16.3497Z" fill="currentColor"/><path d="M18.8753 16.3497C18.8751 15.5352 18.2142 14.875 17.3997 14.875C16.5854 14.8753 15.9253 15.5354 15.9251 16.3497C15.9251 17.1641 16.5853 17.825 17.3997 17.8252C18.2144 17.8252 18.8753 17.1643 18.8753 16.3497ZM20.1253 16.3497C20.1253 17.8546 18.9047 19.0752 17.3997 19.0752C15.8949 19.075 14.6751 17.8545 14.6751 16.3497C14.6753 14.845 15.8951 13.6253 17.3997 13.625C18.9046 13.625 20.1251 14.8449 20.1253 16.3497Z" fill="currentColor"/><path d="M12.0005 9.75L12.4419 10.1924L7.79251 14.8418L7.35013 14.4004L6.90775 13.958L11.5581 9.30762L12.0005 9.75Z" fill="currentColor"/><path d="M12.0005 9.75L11.5583 10.1924L16.2078 14.8418L16.6501 14.4004L17.0925 13.958L12.4421 9.30762L12.0005 9.75Z" fill="currentColor"/><path d="M8.85065 16.9751V15.7251L15.4503 15.7251V16.9751L8.85065 16.9751Z" fill="currentColor"/>',
3950
+ },
3701
3951
  };
3702
3952
  // ui-quote — Zitatzeichen (Team-Stimme): Zitat-Glyphe für Testimonials (Bereich tönt nur den Akzent).
3703
- const CDS_QUOTE_ICON = { viewBox: "0 0 24 24", body: "<path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"/>" };
3953
+ const CDS_QUOTE_ICON = {
3954
+ viewBox: '0 0 24 24',
3955
+ body: '<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>',
3956
+ };
3704
3957
 
3705
3958
  /**
3706
3959
  * Card — Wrapper um `.card` aus css/components.css → „Cards“.
@@ -3768,7 +4021,9 @@ class CardComponent {
3768
4021
  <p class="card-eyebrow">{{ eyebrow() }}</p>
3769
4022
  }
3770
4023
  @if (title()) {
3771
- <h3 class="card-title"><span>{{ title() }}</span></h3>
4024
+ <h3 class="card-title">
4025
+ <span>{{ title() }}</span>
4026
+ </h3>
3772
4027
  }
3773
4028
  @if (text()) {
3774
4029
  <p class="card-text">{{ text() }}</p>
@@ -3777,7 +4032,9 @@ class CardComponent {
3777
4032
  </div>
3778
4033
  @if (actionLabel()) {
3779
4034
  <div class="card-footer">
3780
- <button [class]="actionClasses()" type="button" (click)="actionClick.emit()">{{ actionLabel() }}</button>
4035
+ <button [class]="actionClasses()" type="button" (click)="actionClick.emit()">
4036
+ {{ actionLabel() }}
4037
+ </button>
3781
4038
  </div>
3782
4039
  }
3783
4040
  </article>
@@ -3798,7 +4055,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3798
4055
  <p class="card-eyebrow">{{ eyebrow() }}</p>
3799
4056
  }
3800
4057
  @if (title()) {
3801
- <h3 class="card-title"><span>{{ title() }}</span></h3>
4058
+ <h3 class="card-title">
4059
+ <span>{{ title() }}</span>
4060
+ </h3>
3802
4061
  }
3803
4062
  @if (text()) {
3804
4063
  <p class="card-text">{{ text() }}</p>
@@ -3807,7 +4066,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3807
4066
  </div>
3808
4067
  @if (actionLabel()) {
3809
4068
  <div class="card-footer">
3810
- <button [class]="actionClasses()" type="button" (click)="actionClick.emit()">{{ actionLabel() }}</button>
4069
+ <button [class]="actionClasses()" type="button" (click)="actionClick.emit()">
4070
+ {{ actionLabel() }}
4071
+ </button>
3811
4072
  </div>
3812
4073
  }
3813
4074
  </article>
@@ -3844,7 +4105,11 @@ class StatCardComponent {
3844
4105
  <p class="card-stat-value">{{ value() }}</p>
3845
4106
  <p class="card-stat-label">{{ label() }}</p>
3846
4107
  @if (trend()) {
3847
- <span class="card-stat-trend" [class.up]="trend() === 'up'" [class.down]="trend() === 'down'">
4108
+ <span
4109
+ class="card-stat-trend"
4110
+ [class.up]="trend() === 'up'"
4111
+ [class.down]="trend() === 'down'"
4112
+ >
3848
4113
  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
3849
4114
  <path [attr.d]="trend() === 'up' ? 'M7 14l5-5 5 5z' : 'M7 10l5 5 5-5z'" />
3850
4115
  </svg>
@@ -3864,7 +4129,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3864
4129
  <p class="card-stat-value">{{ value() }}</p>
3865
4130
  <p class="card-stat-label">{{ label() }}</p>
3866
4131
  @if (trend()) {
3867
- <span class="card-stat-trend" [class.up]="trend() === 'up'" [class.down]="trend() === 'down'">
4132
+ <span
4133
+ class="card-stat-trend"
4134
+ [class.up]="trend() === 'up'"
4135
+ [class.down]="trend() === 'down'"
4136
+ >
3868
4137
  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
3869
4138
  <path [attr.d]="trend() === 'up' ? 'M7 14l5-5 5 5z' : 'M7 10l5 5 5-5z'" />
3870
4139
  </svg>
@@ -3959,7 +4228,13 @@ class BlockquoteComponent {
3959
4228
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BlockquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3960
4229
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: BlockquoteComponent, isStandalone: true, selector: "cds-blockquote", inputs: { quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, roleLabel: { classPropertyName: "roleLabel", publicName: "roleLabel", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
3961
4230
  <figure class="bq" [attr.data-area]="area() || null">
3962
- <svg class="bq-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
4231
+ <svg
4232
+ class="bq-icon"
4233
+ viewBox="0 0 24 24"
4234
+ aria-hidden="true"
4235
+ focusable="false"
4236
+ [innerHTML]="quoteIcon()"
4237
+ ></svg>
3963
4238
  <blockquote>{{ quote() }}</blockquote>
3964
4239
  @if (name() || roleLabel()) {
3965
4240
  <figcaption class="bq-caption">
@@ -3981,7 +4256,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
3981
4256
  changeDetection: ChangeDetectionStrategy.OnPush,
3982
4257
  template: `
3983
4258
  <figure class="bq" [attr.data-area]="area() || null">
3984
- <svg class="bq-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
4259
+ <svg
4260
+ class="bq-icon"
4261
+ viewBox="0 0 24 24"
4262
+ aria-hidden="true"
4263
+ focusable="false"
4264
+ [innerHTML]="quoteIcon()"
4265
+ ></svg>
3985
4266
  <blockquote>{{ quote() }}</blockquote>
3986
4267
  @if (name() || roleLabel()) {
3987
4268
  <figcaption class="bq-caption">
@@ -4050,7 +4331,7 @@ class CodeBlockComponent {
4050
4331
  this.destroyRef.onDestroy(() => this.clearResetTimer());
4051
4332
  }
4052
4333
  /** @internal */
4053
- wrapClasses = computed(() => (this.terminal() ? 'cb-wrap cb-terminal' : 'cb-wrap'), /* @ts-ignore */
4334
+ wrapClasses = computed(() => this.terminal() ? 'cb-wrap cb-terminal' : 'cb-wrap', /* @ts-ignore */
4054
4335
  ...(ngDevMode ? [{ debugName: "wrapClasses" }] : /* istanbul ignore next */ []));
4055
4336
  /**
4056
4337
  * Text der Live-Region (`role="status"`) neben dem Button. Leer im Ruhezustand, damit
@@ -4386,12 +4667,22 @@ class ScaleComponent extends CvaBase {
4386
4667
  // s. Kommentar oben.
4387
4668
  return {
4388
4669
  label,
4389
- style: { ...base, 'text-align': 'left', 'padding-left': '11px', 'padding-right': '4px' },
4670
+ style: {
4671
+ ...base,
4672
+ 'text-align': 'left',
4673
+ 'padding-left': '11px',
4674
+ 'padding-right': '4px',
4675
+ },
4390
4676
  };
4391
4677
  if (i === n - 1)
4392
4678
  return {
4393
4679
  label,
4394
- style: { ...base, 'text-align': 'right', 'padding-left': '4px', 'padding-right': '11px' },
4680
+ style: {
4681
+ ...base,
4682
+ 'text-align': 'right',
4683
+ 'padding-left': '4px',
4684
+ 'padding-right': '11px',
4685
+ },
4395
4686
  };
4396
4687
  return { label, style: { ...base, 'text-align': 'center', 'padding-inline': '4px' } };
4397
4688
  });
@@ -4414,7 +4705,9 @@ class ScaleComponent extends CvaBase {
4414
4705
  <div class="field-slider">
4415
4706
  <div class="field-slider-header">
4416
4707
  <label class="field-slider-label" [attr.for]="scaleId()">{{ label() }}</label>
4417
- <output [class]="outputClasses()" [attr.for]="scaleId()" [id]="scaleId() + '-out'">{{ currentLabel() }}</output>
4708
+ <output [class]="outputClasses()" [attr.for]="scaleId()" [id]="scaleId() + '-out'">{{
4709
+ currentLabel()
4710
+ }}</output>
4418
4711
  </div>
4419
4712
  <input
4420
4713
  [class]="sliderClasses()"
@@ -4470,7 +4763,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
4470
4763
  <div class="field-slider">
4471
4764
  <div class="field-slider-header">
4472
4765
  <label class="field-slider-label" [attr.for]="scaleId()">{{ label() }}</label>
4473
- <output [class]="outputClasses()" [attr.for]="scaleId()" [id]="scaleId() + '-out'">{{ currentLabel() }}</output>
4766
+ <output [class]="outputClasses()" [attr.for]="scaleId()" [id]="scaleId() + '-out'">{{
4767
+ currentLabel()
4768
+ }}</output>
4474
4769
  </div>
4475
4770
  <input
4476
4771
  [class]="sliderClasses()"
@@ -4550,7 +4845,11 @@ class SnackbarComponent {
4550
4845
  *
4551
4846
  * @internal
4552
4847
  */
4553
- iconStroke = computed(() => ({ def: 'var(--co-200)', ok: 'var(--c-success-strong-icon)', err: 'var(--c-error-strong-icon)' })[this.tone()], /* @ts-ignore */
4848
+ iconStroke = computed(() => ({
4849
+ def: 'var(--co-200)',
4850
+ ok: 'var(--c-success-strong-icon)',
4851
+ err: 'var(--c-error-strong-icon)',
4852
+ })[this.tone()], /* @ts-ignore */
4554
4853
  ...(ngDevMode ? [{ debugName: "iconStroke" }] : /* istanbul ignore next */ []));
4555
4854
  /**
4556
4855
  * Lucide-artiger Pfad je Ton (Glühbirne / Häkchen-Kreis / Ausrufezeichen-Kreis).
@@ -4656,7 +4955,13 @@ class TestimonialComponent {
4656
4955
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: TestimonialComponent, isStandalone: true, selector: "cds-testimonial", inputs: { quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, roleLabel: { classPropertyName: "roleLabel", publicName: "roleLabel", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
4657
4956
  <figure class="testimonial" [attr.data-area]="area() || null">
4658
4957
  <!-- ui-quote aus icons/icons.js — dieselbe Glyphe wie docs/index.html. -->
4659
- <svg class="testimonial-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
4958
+ <svg
4959
+ class="testimonial-icon"
4960
+ viewBox="0 0 24 24"
4961
+ aria-hidden="true"
4962
+ focusable="false"
4963
+ [innerHTML]="quoteIcon()"
4964
+ ></svg>
4660
4965
  <blockquote>{{ quote() }}</blockquote>
4661
4966
  <figcaption class="testimonial-footer">
4662
4967
  <div>
@@ -4675,7 +4980,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
4675
4980
  template: `
4676
4981
  <figure class="testimonial" [attr.data-area]="area() || null">
4677
4982
  <!-- ui-quote aus icons/icons.js — dieselbe Glyphe wie docs/index.html. -->
4678
- <svg class="testimonial-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
4983
+ <svg
4984
+ class="testimonial-icon"
4985
+ viewBox="0 0 24 24"
4986
+ aria-hidden="true"
4987
+ focusable="false"
4988
+ [innerHTML]="quoteIcon()"
4989
+ ></svg>
4679
4990
  <blockquote>{{ quote() }}</blockquote>
4680
4991
  <figcaption class="testimonial-footer">
4681
4992
  <div>
@@ -4739,7 +5050,13 @@ class TeamVoiceComponent {
4739
5050
  </div>
4740
5051
  <figcaption class="team-voice-body">
4741
5052
  <!-- ui-quote aus icons/icons.js — dieselbe Glyphe wie docs/index.html. -->
4742
- <svg class="team-voice-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
5053
+ <svg
5054
+ class="team-voice-icon"
5055
+ viewBox="0 0 24 24"
5056
+ aria-hidden="true"
5057
+ focusable="false"
5058
+ [innerHTML]="quoteIcon()"
5059
+ ></svg>
4743
5060
  <blockquote class="team-voice-quote">{{ quote() }}</blockquote>
4744
5061
  <div class="team-voice-footer">
4745
5062
  <p class="team-voice-name">{{ name() }}</p>
@@ -4761,7 +5078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
4761
5078
  </div>
4762
5079
  <figcaption class="team-voice-body">
4763
5080
  <!-- ui-quote aus icons/icons.js — dieselbe Glyphe wie docs/index.html. -->
4764
- <svg class="team-voice-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" [innerHTML]="quoteIcon()"></svg>
5081
+ <svg
5082
+ class="team-voice-icon"
5083
+ viewBox="0 0 24 24"
5084
+ aria-hidden="true"
5085
+ focusable="false"
5086
+ [innerHTML]="quoteIcon()"
5087
+ ></svg>
4765
5088
  <blockquote class="team-voice-quote">{{ quote() }}</blockquote>
4766
5089
  <div class="team-voice-footer">
4767
5090
  <p class="team-voice-name">{{ name() }}</p>
@@ -4857,14 +5180,18 @@ class DownloadCtaComponent {
4857
5180
  type="button"
4858
5181
  [attr.aria-label]="primaryAriaLabel()"
4859
5182
  (click)="primaryClick.emit($event)"
4860
- >{{ primaryLabel() }}</button>
5183
+ >
5184
+ {{ primaryLabel() }}
5185
+ </button>
4861
5186
  @if (secondaryLabel()) {
4862
5187
  <button
4863
5188
  [class]="'btn btn-text btn-' + area()"
4864
5189
  type="button"
4865
5190
  [attr.aria-label]="secondaryAriaLabel()"
4866
5191
  (click)="secondaryClick.emit($event)"
4867
- >{{ secondaryLabel() }}</button>
5192
+ >
5193
+ {{ secondaryLabel() }}
5194
+ </button>
4868
5195
  }
4869
5196
  </div>
4870
5197
  </div>
@@ -4906,14 +5233,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
4906
5233
  type="button"
4907
5234
  [attr.aria-label]="primaryAriaLabel()"
4908
5235
  (click)="primaryClick.emit($event)"
4909
- >{{ primaryLabel() }}</button>
5236
+ >
5237
+ {{ primaryLabel() }}
5238
+ </button>
4910
5239
  @if (secondaryLabel()) {
4911
5240
  <button
4912
5241
  [class]="'btn btn-text btn-' + area()"
4913
5242
  type="button"
4914
5243
  [attr.aria-label]="secondaryAriaLabel()"
4915
5244
  (click)="secondaryClick.emit($event)"
4916
- >{{ secondaryLabel() }}</button>
5245
+ >
5246
+ {{ secondaryLabel() }}
5247
+ </button>
4917
5248
  }
4918
5249
  </div>
4919
5250
  </div>
@@ -5276,7 +5607,11 @@ class StoererComponent {
5276
5607
  const [year, month, day] = iso.split('-').map(Number);
5277
5608
  if (!year || !month || !day)
5278
5609
  return iso;
5279
- return new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(year, month - 1, day));
5610
+ return new Intl.DateTimeFormat('de-DE', {
5611
+ day: 'numeric',
5612
+ month: 'long',
5613
+ year: 'numeric',
5614
+ }).format(new Date(year, month - 1, day));
5280
5615
  }, /* @ts-ignore */
5281
5616
  ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
5282
5617
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: StoererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5287,7 +5622,9 @@ class StoererComponent {
5287
5622
  <ng-content select="[cdsIcon]"></ng-content>
5288
5623
  {{ topic() }}
5289
5624
  </span>
5290
- <span class="stoerer-title"><span>{{ title() }}</span></span>
5625
+ <span class="stoerer-title"
5626
+ ><span>{{ title() }}</span></span
5627
+ >
5291
5628
  @if (hasMeta()) {
5292
5629
  <span class="stoerer-meta">
5293
5630
  @if (date()) {
@@ -5315,7 +5652,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
5315
5652
  <ng-content select="[cdsIcon]"></ng-content>
5316
5653
  {{ topic() }}
5317
5654
  </span>
5318
- <span class="stoerer-title"><span>{{ title() }}</span></span>
5655
+ <span class="stoerer-title"
5656
+ ><span>{{ title() }}</span></span
5657
+ >
5319
5658
  @if (hasMeta()) {
5320
5659
  <span class="stoerer-meta">
5321
5660
  @if (date()) {
@@ -5498,7 +5837,9 @@ class LinkCardComponent {
5498
5837
  @if (eyebrow()) {
5499
5838
  <p class="card-eyebrow">{{ eyebrow() }}</p>
5500
5839
  }
5501
- <h3 class="card-title"><span>{{ title() }}</span></h3>
5840
+ <h3 class="card-title">
5841
+ <span>{{ title() }}</span>
5842
+ </h3>
5502
5843
  <p class="card-text">{{ text() }}</p>
5503
5844
  @if (ctaLabel()) {
5504
5845
  <span class="card-cta-link" [class.card-cta-link--pinned]="ctaPinned()">
@@ -5520,7 +5861,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
5520
5861
  @if (eyebrow()) {
5521
5862
  <p class="card-eyebrow">{{ eyebrow() }}</p>
5522
5863
  }
5523
- <h3 class="card-title"><span>{{ title() }}</span></h3>
5864
+ <h3 class="card-title">
5865
+ <span>{{ title() }}</span>
5866
+ </h3>
5524
5867
  <p class="card-text">{{ text() }}</p>
5525
5868
  @if (ctaLabel()) {
5526
5869
  <span class="card-cta-link" [class.card-cta-link--pinned]="ctaPinned()">
@@ -5643,9 +5986,12 @@ class FeaturedCardComponent {
5643
5986
  </div>
5644
5987
  <div class="card-featured-body">
5645
5988
  @if (pill()) {
5646
- <span class="pill" [attr.data-area]="area() || null" [attr.aria-label]="computedPillAriaLabel()">{{
5647
- pill()
5648
- }}</span>
5989
+ <span
5990
+ class="pill"
5991
+ [attr.data-area]="area() || null"
5992
+ [attr.aria-label]="computedPillAriaLabel()"
5993
+ >{{ pill() }}</span
5994
+ >
5649
5995
  }
5650
5996
  <h3 class="card-title-hero">{{ title() }}</h3>
5651
5997
  <p class="card-text">{{ text() }}</p>
@@ -5675,9 +6021,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
5675
6021
  </div>
5676
6022
  <div class="card-featured-body">
5677
6023
  @if (pill()) {
5678
- <span class="pill" [attr.data-area]="area() || null" [attr.aria-label]="computedPillAriaLabel()">{{
5679
- pill()
5680
- }}</span>
6024
+ <span
6025
+ class="pill"
6026
+ [attr.data-area]="area() || null"
6027
+ [attr.aria-label]="computedPillAriaLabel()"
6028
+ >{{ pill() }}</span
6029
+ >
5681
6030
  }
5682
6031
  <h3 class="card-title-hero">{{ title() }}</h3>
5683
6032
  <p class="card-text">{{ text() }}</p>
@@ -6435,7 +6784,11 @@ class TableComponent {
6435
6784
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: TableComponent, isStandalone: true, selector: "cds-table", inputs: { caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: true, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, scrollLabel: { classPropertyName: "scrollLabel", publicName: "scrollLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
6436
6785
  <div class="tbl-wrap" tabindex="0" role="region" [attr.aria-label]="accessibleName()">
6437
6786
  <table class="tbl" [class.tbl--striped]="striped()">
6438
- <caption>{{ caption() }}</caption>
6787
+ <caption>
6788
+ {{
6789
+ caption()
6790
+ }}
6791
+ </caption>
6439
6792
  <ng-content></ng-content>
6440
6793
  </table>
6441
6794
  </div>
@@ -6449,7 +6802,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
6449
6802
  template: `
6450
6803
  <div class="tbl-wrap" tabindex="0" role="region" [attr.aria-label]="accessibleName()">
6451
6804
  <table class="tbl" [class.tbl--striped]="striped()">
6452
- <caption>{{ caption() }}</caption>
6805
+ <caption>
6806
+ {{
6807
+ caption()
6808
+ }}
6809
+ </caption>
6453
6810
  <ng-content></ng-content>
6454
6811
  </table>
6455
6812
  </div>
@@ -6566,7 +6923,11 @@ class CompareComponent {
6566
6923
  </summary>
6567
6924
  <div class="ep-compare-table-wrap">
6568
6925
  <table class="ep-compare-table">
6569
- <caption class="sr-only">{{ caption() }}</caption>
6926
+ <caption class="sr-only">
6927
+ {{
6928
+ caption()
6929
+ }}
6930
+ </caption>
6570
6931
  <thead>
6571
6932
  <tr>
6572
6933
  <th scope="col">{{ rowsLabel() }}</th>
@@ -6582,13 +6943,11 @@ class CompareComponent {
6582
6943
  @for (cell of row.cells; track $index) {
6583
6944
  <td [class.ep-compare-pro]="columns()[$index].pro">
6584
6945
  @if (cell === true) {
6585
- <span class="ep-compare-yes" aria-hidden="true">✓</span><span class="sr-only"
6586
- >Enthalten</span
6587
- >
6946
+ <span class="ep-compare-yes" aria-hidden="true">✓</span
6947
+ ><span class="sr-only">Enthalten</span>
6588
6948
  } @else if (cell === false) {
6589
- <span class="ep-compare-no" aria-hidden="true">−</span><span class="sr-only"
6590
- >Nicht enthalten</span
6591
- >
6949
+ <span class="ep-compare-no" aria-hidden="true">−</span
6950
+ ><span class="sr-only">Nicht enthalten</span>
6592
6951
  } @else {
6593
6952
  {{ cell }}
6594
6953
  }
@@ -6625,7 +6984,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
6625
6984
  </summary>
6626
6985
  <div class="ep-compare-table-wrap">
6627
6986
  <table class="ep-compare-table">
6628
- <caption class="sr-only">{{ caption() }}</caption>
6987
+ <caption class="sr-only">
6988
+ {{
6989
+ caption()
6990
+ }}
6991
+ </caption>
6629
6992
  <thead>
6630
6993
  <tr>
6631
6994
  <th scope="col">{{ rowsLabel() }}</th>
@@ -6641,13 +7004,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
6641
7004
  @for (cell of row.cells; track $index) {
6642
7005
  <td [class.ep-compare-pro]="columns()[$index].pro">
6643
7006
  @if (cell === true) {
6644
- <span class="ep-compare-yes" aria-hidden="true">✓</span><span class="sr-only"
6645
- >Enthalten</span
6646
- >
7007
+ <span class="ep-compare-yes" aria-hidden="true">✓</span
7008
+ ><span class="sr-only">Enthalten</span>
6647
7009
  } @else if (cell === false) {
6648
- <span class="ep-compare-no" aria-hidden="true">−</span><span class="sr-only"
6649
- >Nicht enthalten</span
6650
- >
7010
+ <span class="ep-compare-no" aria-hidden="true">−</span
7011
+ ><span class="sr-only">Nicht enthalten</span>
6651
7012
  } @else {
6652
7013
  {{ cell }}
6653
7014
  }
@@ -7042,7 +7403,9 @@ class ArticleHeaderComponent {
7042
7403
  <span class="article-meta-sep" aria-hidden="true"></span>
7043
7404
  }
7044
7405
  @if (hasDate()) {
7045
- <time class="article-meta-date" [attr.datetime]="date()">{{ dateLabel() || date() }}</time>
7406
+ <time class="article-meta-date" [attr.datetime]="date()">{{
7407
+ dateLabel() || date()
7408
+ }}</time>
7046
7409
  }
7047
7410
  </div>
7048
7411
  }
@@ -7093,7 +7456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
7093
7456
  <span class="article-meta-sep" aria-hidden="true"></span>
7094
7457
  }
7095
7458
  @if (hasDate()) {
7096
- <time class="article-meta-date" [attr.datetime]="date()">{{ dateLabel() || date() }}</time>
7459
+ <time class="article-meta-date" [attr.datetime]="date()">{{
7460
+ dateLabel() || date()
7461
+ }}</time>
7097
7462
  }
7098
7463
  </div>
7099
7464
  }
@@ -7183,7 +7548,9 @@ class ArticleTocComponent {
7183
7548
  </summary>
7184
7549
  <ol class="article-toc-list">
7185
7550
  @for (item of items(); track $index) {
7186
- <li><a [href]="item.href">{{ item.label }}</a></li>
7551
+ <li>
7552
+ <a [href]="item.href">{{ item.label }}</a>
7553
+ </li>
7187
7554
  }
7188
7555
  </ol>
7189
7556
  </details>
@@ -7211,7 +7578,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
7211
7578
  </summary>
7212
7579
  <ol class="article-toc-list">
7213
7580
  @for (item of items(); track $index) {
7214
- <li><a [href]="item.href">{{ item.label }}</a></li>
7581
+ <li>
7582
+ <a [href]="item.href">{{ item.label }}</a>
7583
+ </li>
7215
7584
  }
7216
7585
  </ol>
7217
7586
  </details>
@@ -7304,11 +7673,15 @@ class ArticleCalloutComponent {
7304
7673
  *
7305
7674
  * @internal
7306
7675
  */
7307
- eyebrowId = computed(() => (this.eyebrow() ? `${this.instanceId}-eyebrow` : null), /* @ts-ignore */
7676
+ eyebrowId = computed(() => this.eyebrow() ? `${this.instanceId}-eyebrow` : null, /* @ts-ignore */
7308
7677
  ...(ngDevMode ? [{ debugName: "eyebrowId" }] : /* istanbul ignore next */ []));
7309
7678
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ArticleCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7310
7679
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ArticleCalloutComponent, isStandalone: true, selector: "cds-article-callout", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
7311
- <aside class="article-callout" [attr.data-area]="area() || null" [attr.aria-labelledby]="eyebrowId()">
7680
+ <aside
7681
+ class="article-callout"
7682
+ [attr.data-area]="area() || null"
7683
+ [attr.aria-labelledby]="eyebrowId()"
7684
+ >
7312
7685
  @if (eyebrow(); as eyebrowText) {
7313
7686
  <p class="article-callout-eyebrow" [id]="eyebrowId()">{{ eyebrowText }}</p>
7314
7687
  }
@@ -7322,7 +7695,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
7322
7695
  selector: 'cds-article-callout',
7323
7696
  changeDetection: ChangeDetectionStrategy.OnPush,
7324
7697
  template: `
7325
- <aside class="article-callout" [attr.data-area]="area() || null" [attr.aria-labelledby]="eyebrowId()">
7698
+ <aside
7699
+ class="article-callout"
7700
+ [attr.data-area]="area() || null"
7701
+ [attr.aria-labelledby]="eyebrowId()"
7702
+ >
7326
7703
  @if (eyebrow(); as eyebrowText) {
7327
7704
  <p class="article-callout-eyebrow" [id]="eyebrowId()">{{ eyebrowText }}</p>
7328
7705
  }
@@ -7477,14 +7854,18 @@ class ArticlePullquoteComponent {
7477
7854
  area = input('co', /* @ts-ignore */
7478
7855
  ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
7479
7856
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ArticlePullquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7480
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ArticlePullquoteComponent, isStandalone: true, selector: "cds-article-pullquote", inputs: { quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<blockquote class="article-pullquote" [attr.data-area]="area() || null">{{ quote() }}</blockquote>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7857
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ArticlePullquoteComponent, isStandalone: true, selector: "cds-article-pullquote", inputs: { quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<blockquote class="article-pullquote" [attr.data-area]="area() || null">
7858
+ {{ quote() }}
7859
+ </blockquote>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7481
7860
  }
7482
7861
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ArticlePullquoteComponent, decorators: [{
7483
7862
  type: Component,
7484
7863
  args: [{
7485
7864
  selector: 'cds-article-pullquote',
7486
7865
  changeDetection: ChangeDetectionStrategy.OnPush,
7487
- template: `<blockquote class="article-pullquote" [attr.data-area]="area() || null">{{ quote() }}</blockquote>`,
7866
+ template: `<blockquote class="article-pullquote" [attr.data-area]="area() || null">
7867
+ {{ quote() }}
7868
+ </blockquote>`,
7488
7869
  }]
7489
7870
  }], propDecorators: { quote: [{ type: i0.Input, args: [{ isSignal: true, alias: "quote", required: true }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }] } });
7490
7871