@tedi-design-system/angular 8.1.0-rc.2 → 8.1.0-rc.20

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 (14) hide show
  1. package/community/index.d.ts +13 -2
  2. package/community/index.d.ts.map +1 -1
  3. package/community/text-editor/index.d.ts +129 -0
  4. package/community/text-editor/index.d.ts.map +1 -0
  5. package/fesm2022/tedi-design-system-angular-community-text-editor.mjs +378 -0
  6. package/fesm2022/tedi-design-system-angular-community-text-editor.mjs.map +1 -0
  7. package/fesm2022/tedi-design-system-angular-community.mjs +261 -230
  8. package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
  9. package/fesm2022/tedi-design-system-angular-tedi.mjs +2354 -351
  10. package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
  11. package/index.css +1 -1
  12. package/package.json +16 -2
  13. package/tedi/index.d.ts +1190 -65
  14. package/tedi/index.d.ts.map +1 -1
package/fesm2022/tedi-design-system-angular-community.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, model, contentChildren, effect, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, EventEmitter } from '@angular/core';
2
+ import { input, inject, computed, ViewEncapsulation, Component, model, ChangeDetectionStrategy, contentChildren, effect, Directive, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, EventEmitter } from '@angular/core';
3
3
  import * as i1 from '@tedi-design-system/angular/tedi';
4
- import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, AttachmentComponent, AttachmentActionsComponent, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
4
+ import { BaseButtonDirective, CardComponent as CardComponent$1, CardContentComponent as CardContentComponent$1, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, AttachmentComponent, AttachmentActionsComponent, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
5
5
  import { _IdGenerator, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
6
6
  import * as i1$1 from '@angular/common';
7
7
  import { NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
@@ -20,6 +20,11 @@ import * as i1$3 from '@angular/router';
20
20
  import { RouterLink, Router, RouterLinkActive } from '@angular/router';
21
21
  import { Subject, takeUntil, startWith } from 'rxjs';
22
22
 
23
+ /**
24
+ * @deprecated Use `FloatingButtonComponent` from `@tedi-design-system/angular/tedi`.
25
+ * Both components use the same selector, so update the TypeScript import to use
26
+ * the TEDI-Ready component.
27
+ */
23
28
  class FloatingButtonComponent {
24
29
  /**
25
30
  * Specifies the color theme of the button. The color should meet accessibility standards for color contrast.
@@ -50,7 +55,7 @@ class FloatingButtonComponent {
50
55
  return classes.join(" ");
51
56
  }, ...(ngDevMode ? [{ debugName: "floatClasses" }] : []));
52
57
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
53
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "floatClasses()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"], encapsulation: i0.ViewEncapsulation.None });
58
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "floatClasses()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"], encapsulation: i0.ViewEncapsulation.None });
54
59
  }
55
60
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, decorators: [{
56
61
  type: Component,
@@ -60,9 +65,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
60
65
  },
61
66
  ], host: {
62
67
  "[class]": "floatClasses()",
63
- }, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"] }]
68
+ }, styles: ["button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"] }]
64
69
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }] } });
65
70
 
71
+ class AccordionItemComponent {
72
+ /**
73
+ * Accordion item id
74
+ */
75
+ id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
76
+ /**
77
+ * Whether accordion item is selected
78
+ */
79
+ selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
80
+ opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
81
+ idGenerator = inject(_IdGenerator);
82
+ itemId = computed(() => this.id() || this.idGenerator.getId("accordion"), ...(ngDevMode ? [{ debugName: "itemId" }] : []));
83
+ headerId = computed(() => {
84
+ return `tedi-accordion-header-${this.itemId()}`;
85
+ }, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
86
+ contentId = computed(() => {
87
+ return `tedi-accordion-content-${this.itemId()}`;
88
+ }, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
89
+ open() {
90
+ this.opened.set(true);
91
+ }
92
+ close() {
93
+ this.opened.set(false);
94
+ }
95
+ toggle() {
96
+ this.opened.update((wasOpened) => !wasOpened);
97
+ }
98
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
99
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n class=\"tedi-accordion-item__card\"\n [borderless]=\"true\"\n [padding]=\"0\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n [class.tedi-accordion-item__card--selected]=\"selected()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_card-radius: var(--card-radius-rounded);--_card-border: var(--card-border-primary);--_card-bg: var(--card-background-primary);--_card-padding-top: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header,.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border:1px solid var(--_card-border)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--selected{outline:1px solid var(--card-border-selected);outline-offset:-1px}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
100
+ }
101
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, decorators: [{
102
+ type: Component,
103
+ args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent$1], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
104
+ "[class.tedi-accordion-item]": "true",
105
+ }, template: "<tedi-card\n class=\"tedi-accordion-item__card\"\n [borderless]=\"true\"\n [padding]=\"0\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n [class.tedi-accordion-item__card--selected]=\"selected()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_card-radius: var(--card-radius-rounded);--_card-border: var(--card-border-primary);--_card-bg: var(--card-background-primary);--_card-padding-top: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header,.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border:1px solid var(--_card-border)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--selected{outline:1px solid var(--card-border-selected);outline-offset:-1px}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
106
+ }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
107
+
108
+ /**
109
+ * @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
110
+ */
111
+ class AccordionComponent {
112
+ /**
113
+ * id-s of items that should be opened by default.
114
+ */
115
+ defaultOpenItems = input(...(ngDevMode ? [undefined, { debugName: "defaultOpenItems" }] : []));
116
+ /**
117
+ * Whether only one accordion item can be opened at once.
118
+ * @default false
119
+ */
120
+ singleOpen = input(false, ...(ngDevMode ? [{ debugName: "singleOpen" }] : []));
121
+ accordionItems = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "accordionItems", descendants: true }] : [{
122
+ descendants: true,
123
+ }]));
124
+ prevOpens = [];
125
+ constructor() {
126
+ effect(() => {
127
+ const single = this.singleOpen();
128
+ const items = this.accordionItems();
129
+ const opens = items.map((it) => it.opened());
130
+ let newlyOpenedIndex = -1;
131
+ if (single && items.length > 0) {
132
+ for (let i = 0; i < opens.length; i++) {
133
+ const prev = i < this.prevOpens.length ? this.prevOpens[i] : false;
134
+ if (!prev && opens[i]) {
135
+ newlyOpenedIndex = i;
136
+ }
137
+ }
138
+ if (newlyOpenedIndex >= 0) {
139
+ for (let i = 0; i < items.length; i++) {
140
+ if (i !== newlyOpenedIndex && items[i].opened()) {
141
+ items[i].close();
142
+ }
143
+ }
144
+ }
145
+ }
146
+ this.prevOpens = opens;
147
+ });
148
+ }
149
+ openDefaultOpenItems() {
150
+ const defaultOpenItems = this.defaultOpenItems();
151
+ this.accordionItems().forEach((item) => {
152
+ if (defaultOpenItems?.includes(item.id())) {
153
+ item.open();
154
+ }
155
+ });
156
+ }
157
+ ngOnInit() {
158
+ this.openDefaultOpenItems();
159
+ }
160
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
161
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { defaultOpenItems: { classPropertyName: "defaultOpenItems", publicName: "defaultOpenItems", isSignal: true, isRequired: false, transformFunction: null }, singleOpen: { classPropertyName: "singleOpen", publicName: "singleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
162
+ }
163
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
164
+ type: Component,
165
+ args: [{ selector: "tedi-accordion", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"] }]
166
+ }], ctorParameters: () => [], propDecorators: { defaultOpenItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItems", required: false }] }], singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { ...{
167
+ descendants: true,
168
+ }, isSignal: true }] }] } });
169
+
170
+ class AccordionIconComponent {
171
+ /**
172
+ * Background colour of the icon column.
173
+ */
174
+ background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
175
+ _backgroundClass = computed(() => {
176
+ const background = this.background();
177
+ return background ? `tedi-accordion-icon--background--${background}` : "";
178
+ }, ...(ngDevMode ? [{ debugName: "_backgroundClass" }] : []));
179
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionIconComponent, isStandalone: true, selector: "tedi-accordion-icon", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-icon": "true", "class": "_backgroundClass()" } }, ngImport: i0, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-icon--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-icon--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-icon--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-icon--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-icon--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-icon--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-icon--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-icon--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-icon--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-icon--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-icon--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-icon--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-icon--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-icon--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-icon--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-icon--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-icon--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-icon--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-icon--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-icon--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-icon--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-icon--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-icon--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-icon--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-icon--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-icon--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-icon--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-icon--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-icon--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-icon--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
181
+ }
182
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, decorators: [{
183
+ type: Component,
184
+ args: [{ standalone: true, selector: "tedi-accordion-icon", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
185
+ "[class.tedi-accordion-icon]": "true",
186
+ "[class]": "_backgroundClass()",
187
+ }, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-icon--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-icon--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-icon--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-icon--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-icon--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-icon--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-icon--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-icon--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-icon--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-icon--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-icon--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-icon--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-icon--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-icon--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-icon--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-icon--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-icon--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-icon--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-icon--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-icon--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-icon--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-icon--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-icon--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-icon--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-icon--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-icon--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-icon--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-icon--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-icon--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-icon--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"] }]
188
+ }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
189
+
190
+ class AccordionItemContentComponent {
191
+ background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
192
+ accordionItem = inject(AccordionItemComponent);
193
+ headerId = this.accordionItem.headerId;
194
+ contentId = this.accordionItem.contentId;
195
+ opened = this.accordionItem.opened;
196
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
197
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n [background]=\"background() ?? 'primary'\"\n [padding]=\"1\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
198
+ }
199
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
200
+ type: Component,
201
+ args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent$1], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
202
+ "[class.tedi-accordion-item-content]": "true",
203
+ }, template: "<tedi-card-content\n [background]=\"background() ?? 'primary'\"\n [padding]=\"1\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
204
+ }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
205
+
206
+ const WHITE_ICON_VARIANTS = ["brand", "brand-dark"];
207
+ class AccordionItemHeaderComponent {
208
+ /**
209
+ * Whether accordion header should have indicator arrow
210
+ * @default false
211
+ */
212
+ indicator = input(false, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
213
+ /**
214
+ * Open button text. Visible if both openText and closeText are provided.
215
+ */
216
+ openText = input(...(ngDevMode ? [undefined, { debugName: "openText" }] : []));
217
+ /**
218
+ * Close button text. Visible if both openText and closeText are provided.
219
+ */
220
+ closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
221
+ /**
222
+ * Accordion header variant
223
+ */
224
+ variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
225
+ /**
226
+ * Accordion header background
227
+ */
228
+ background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
229
+ _modifierClasses = computed(() => {
230
+ const classes = [];
231
+ const variant = this.variant();
232
+ const background = this.background();
233
+ if (variant) {
234
+ classes.push(`tedi-accordion-item-header--variant--${variant}`);
235
+ }
236
+ if (background) {
237
+ classes.push(`tedi-accordion-item-header--background--${background}`);
238
+ }
239
+ return classes.join(" ");
240
+ }, ...(ngDevMode ? [{ debugName: "_modifierClasses" }] : []));
241
+ /**
242
+ * Color of the indicator arrow
243
+ */
244
+ indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
245
+ /**
246
+ * Whether indicator is displayed before or after the main content
247
+ */
248
+ indicatorPosition = input("end", ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
249
+ /**
250
+ * Whether header is clickable
251
+ */
252
+ clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
253
+ accordionItem = inject(AccordionItemComponent);
254
+ opened = this.accordionItem.opened;
255
+ headerId = this.accordionItem.headerId;
256
+ contentId = this.accordionItem.contentId;
257
+ toggleButtonText = computed(() => {
258
+ if (this.openText() && this.closeText()) {
259
+ return this.opened() ? this.closeText() : this.openText();
260
+ }
261
+ return;
262
+ }, ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
263
+ indicatorIconColor = computed(() => {
264
+ if (this.indicatorColor()) {
265
+ return this.indicatorColor();
266
+ }
267
+ return WHITE_ICON_VARIANTS.includes(this.variant())
268
+ ? "white"
269
+ : "brand";
270
+ }, ...(ngDevMode ? [{ debugName: "indicatorIconColor" }] : []));
271
+ toggle() {
272
+ this.accordionItem.toggle();
273
+ }
274
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
275
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n [id]=\"headerId()\"\n class=\"tedi-accordion-item-header\"\n [class]=\"_modifierClasses()\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [class.tedi-accordion-item-header--brand]=\"variant() === 'brand'\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header--variant--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-accordion-item-header--variant--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}.tedi-accordion-item-header--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-item-header--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-item-header--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-item-header--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-item-header--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-item-header--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-item-header--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-item-header--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-item-header--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-item-header--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-item-header--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-item-header--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-item-header--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-item-header--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-item-header--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-item-header--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-item-header--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-item-header--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-item-header--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-item-header--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-item-header--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-item-header--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-item-header{padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start;background:var(--_card-bg)}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
276
+ }
277
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
278
+ type: Component,
279
+ args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
280
+ IconComponent,
281
+ ButtonComponent,
282
+ NgTemplateOutlet,
283
+ ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
284
+ "[class.tedi-accordion-item-header-host]": "true",
285
+ }, template: "<button\n [id]=\"headerId()\"\n class=\"tedi-accordion-item-header\"\n [class]=\"_modifierClasses()\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [class.tedi-accordion-item-header--brand]=\"variant() === 'brand'\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header--variant--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-accordion-item-header--variant--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}.tedi-accordion-item-header--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-item-header--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-item-header--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-item-header--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-item-header--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-item-header--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-item-header--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-item-header--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-item-header--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-item-header--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-item-header--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-item-header--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-item-header--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-item-header--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-item-header--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-item-header--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-item-header--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-item-header--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-item-header--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-item-header--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-item-header--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-item-header--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-item-header{padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start;background:var(--_card-bg)}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
286
+ }], propDecorators: { indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
287
+
66
288
  /**
67
289
  * @deprecated Use background and border inputs on TEDI-ready Card components instead. This directive will be removed from future versions.
68
290
  */
@@ -186,121 +408,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
186
408
  ], template: "<ng-content></ng-content>\n", styles: [".tedi-card{--_card-border: var(--card-border-primary);--_card-selected-border: var(--card-border-selected);--_card-bg: var(--card-background-primary);--_card-timeline-color: var(--general-border-accent);--_card-radius: var(--card-radius-rounded);border-radius:var(--_card-radius);display:flex;flex-direction:column;position:relative}.tedi-card--background--accent{--_card-bg: var(--card-background-accent)}.tedi-card--border--accent{--_card-border: var(--card-background-accent)}.tedi-card--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-card--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-card--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-card--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-card--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-card--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-card--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-card--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-card--background--primary{--_card-bg: var(--card-background-primary)}.tedi-card--border--primary{--_card-border: var(--card-background-primary)}.tedi-card--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-card--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-card--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-card--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-card--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-card--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-card--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-card--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-card--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-card--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-card--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-card--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-card--border--success-primary{--_card-border: var(--card-background-success)}.tedi-card--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-card--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-card--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-card--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-card--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-card--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-card--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-card--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-card--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-card--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-card--spacing-xs{--_card-padding-top: var(--card-padding-xs);--_card-padding-bottom: var(--card-padding-xs);--_card-padding-left: var(--card-padding-xs);--_card-padding-right: var(--card-padding-xs)}.tedi-card--spacing-sm{--_card-padding-top: var(--card-padding-sm);--_card-padding-bottom: var(--card-padding-sm);--_card-padding-left: var(--card-padding-sm);--_card-padding-right: var(--card-padding-sm)}.tedi-card--spacing-md{--_card-padding-top: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default)}.tedi-card--spacing-lg{--_card-padding-top: var(--card-padding-lg);--_card-padding-bottom: var(--card-padding-lg);--_card-padding-left: var(--card-padding-lg);--_card-padding-right: var(--card-padding-lg)}.tedi-card--spacing-none{--_card-padding-top: 0;--_card-padding-bottom: 0;--_card-padding-left: 0;--_card-padding-right: 0}.tedi-card--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-top: 0}.tedi-card--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-bottom: 0}.tedi-card--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-left: 0}.tedi-card--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-right: 0}.tedi-card--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-top: 0}.tedi-card--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-left: 0}.tedi-card--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-right: 0}.tedi-card--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-top-none{--_card-padding-top: 0}.tedi-card--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-left-none{--_card-padding-left: 0}.tedi-card--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-right-none{--_card-padding-right: 0}.tedi-card--accent-border:before{content:\"\";display:block;position:absolute;left:0;top:0;bottom:0;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius);border-left:4px solid var(--_card-border-accent)}.tedi-card--accent-border--info{--_card-border-accent: var(--general-status-info-background-dark)}.tedi-card--accent-border--success{--_card-border-accent: var(--general-status-success-background-secondary)}.tedi-card--accent-border--warning{--_card-border-accent: var(--general-status-warning-background-dark)}.tedi-card--accent-border--danger{--_card-border-accent: var(--general-status-danger-background-secondary)}.tedi-card>.tedi-card-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:not(:first-child){border-top:transparent}.tedi-card>.tedi-card-content:not(.tedi-card-content--has-separator,:last-child){border-bottom:transparent}.tedi-card>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:last-child{border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row>.tedi-card-content:not(:first-child){border-left:transparent}.tedi-card>.tedi-card-row>.tedi-card-content:not(:last-child,.tedi-card-content--has-separator){border-right:transparent}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:last-child{border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:first-child{border-bottom-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:last-child{border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:not(:first-child)>.tedi-card-content{border-top:transparent}.tedi-card>.tedi-card-row:not(:last-child,.tedi-card-row--has-separator)>.tedi-card-content{border-bottom:transparent}.tedi-card--selected{outline:1px solid var(--_card-selected-border);outline-offset:-1px}.tedi-card--borderless{--_card-border: transparent}\n"] }]
187
409
  }], propDecorators: { borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], accentBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentBorder", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
188
410
 
189
- class AccordionItemComponent {
190
- /**
191
- * Accordion item id
192
- */
193
- id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
194
- /**
195
- * Whether accordion item is selected
196
- */
197
- selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
198
- opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
199
- idGenerator = inject(_IdGenerator);
200
- itemId = computed(() => this.id() || this.idGenerator.getId("accordion"), ...(ngDevMode ? [{ debugName: "itemId" }] : []));
201
- headerId = computed(() => {
202
- return `tedi-accordion-header-${this.itemId()}`;
203
- }, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
204
- contentId = computed(() => {
205
- return `tedi-accordion-content-${this.itemId()}`;
206
- }, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
207
- open() {
208
- this.opened.set(true);
209
- }
210
- close() {
211
- this.opened.set(false);
212
- }
213
- toggle() {
214
- this.opened.update((wasOpened) => !wasOpened);
215
- }
216
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
218
- }
219
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, decorators: [{
220
- type: Component,
221
- args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
222
- "[class.tedi-accordion-item]": "true",
223
- }, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
224
- }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
225
-
226
- /**
227
- * @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
228
- */
229
- class AccordionComponent {
230
- /**
231
- * id-s of items that should be opened by default.
232
- */
233
- defaultOpenItems = input(...(ngDevMode ? [undefined, { debugName: "defaultOpenItems" }] : []));
234
- /**
235
- * Whether only one accordion item can be opened at once.
236
- * @default false
237
- */
238
- singleOpen = input(false, ...(ngDevMode ? [{ debugName: "singleOpen" }] : []));
239
- accordionItems = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "accordionItems", descendants: true }] : [{
240
- descendants: true,
241
- }]));
242
- prevOpens = [];
243
- constructor() {
244
- effect(() => {
245
- const single = this.singleOpen();
246
- const items = this.accordionItems();
247
- const opens = items.map((it) => it.opened());
248
- let newlyOpenedIndex = -1;
249
- if (single && items.length > 0) {
250
- for (let i = 0; i < opens.length; i++) {
251
- const prev = i < this.prevOpens.length ? this.prevOpens[i] : false;
252
- if (!prev && opens[i]) {
253
- newlyOpenedIndex = i;
254
- }
255
- }
256
- if (newlyOpenedIndex >= 0) {
257
- for (let i = 0; i < items.length; i++) {
258
- if (i !== newlyOpenedIndex && items[i].opened()) {
259
- items[i].close();
260
- }
261
- }
262
- }
263
- }
264
- this.prevOpens = opens;
265
- });
266
- }
267
- openDefaultOpenItems() {
268
- const defaultOpenItems = this.defaultOpenItems();
269
- this.accordionItems().forEach((item) => {
270
- if (defaultOpenItems?.includes(item.id())) {
271
- item.open();
272
- }
273
- });
274
- }
275
- ngOnInit() {
276
- this.openDefaultOpenItems();
277
- }
278
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
279
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { defaultOpenItems: { classPropertyName: "defaultOpenItems", publicName: "defaultOpenItems", isSignal: true, isRequired: false, transformFunction: null }, singleOpen: { classPropertyName: "singleOpen", publicName: "singleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
280
- }
281
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
282
- type: Component,
283
- args: [{ selector: "tedi-accordion", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"] }]
284
- }], ctorParameters: () => [], propDecorators: { defaultOpenItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItems", required: false }] }], singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { ...{
285
- descendants: true,
286
- }, isSignal: true }] }] } });
287
-
288
- class AccordionIconComponent {
289
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
290
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: AccordionIconComponent, isStandalone: true, selector: "tedi-accordion-icon", host: { properties: { "class.tedi-accordion-icon": "true" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background"] }], ngImport: i0, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
291
- }
292
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, decorators: [{
293
- type: Component,
294
- args: [{ standalone: true, selector: "tedi-accordion-icon", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
295
- "[class.tedi-accordion-icon]": "true",
296
- }, hostDirectives: [
297
- {
298
- directive: CardColorsDirective,
299
- inputs: ["background"],
300
- },
301
- ], template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"] }]
302
- }] });
303
-
304
411
  /**
305
412
  * @deprecated Use CardContent from TEDI-ready instead. This component will be removed from future versions.
306
413
  */
@@ -344,22 +451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
344
451
  ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-content--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-top: 0}.tedi-card-content--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-bottom: 0}.tedi-card-content--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-left: 0}.tedi-card-content--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-right: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-top: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-content--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-top-none{--_card-padding-top: 0}.tedi-card-content--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-content--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-left-none{--_card-padding-left: 0}.tedi-card-content--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-right-none{--_card-padding-right: 0}.tedi-card-content{flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
345
452
  }], propDecorators: { hasSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeparator", required: false }] }], autoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoWidth", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }] } });
346
453
 
347
- class AccordionItemContentComponent {
348
- background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
349
- accordionItem = inject(AccordionItemComponent);
350
- headerId = this.accordionItem.headerId;
351
- contentId = this.accordionItem.contentId;
352
- opened = this.accordionItem.opened;
353
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
354
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
355
- }
356
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
357
- type: Component,
358
- args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
359
- "[class.tedi-accordion-item-content]": "true",
360
- }, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
361
- }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
362
-
363
454
  /**
364
455
  * @deprecated Use CardHeader from TEDI-ready instead. This component will be removed from future versions.
365
456
  */
@@ -391,77 +482,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
391
482
  ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-header{border:1px solid var(--_card-border);background:var(--_card-bg);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-header--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-top: 0}.tedi-card-header--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-bottom: 0}.tedi-card-header--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-left: 0}.tedi-card-header--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-right: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-top: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-header--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-top-none{--_card-padding-top: 0}.tedi-card-header--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-header--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-left-none{--_card-padding-left: 0}.tedi-card-header--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-right-none{--_card-padding-right: 0}.tedi-card-header--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-card-header--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-card-header--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-card-header--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-card-header--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}\n"] }]
392
483
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
393
484
 
394
- const WHITE_ICON_VARIANTS = ["brand", "brand-dark"];
395
- class AccordionItemHeaderComponent {
396
- /**
397
- * Whether accordion header should have indicator arrow
398
- * @default false
399
- */
400
- indicator = input(false, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
401
- /**
402
- * Open button text. Visible if both openText and closeText are provided.
403
- */
404
- openText = input(...(ngDevMode ? [undefined, { debugName: "openText" }] : []));
405
- /**
406
- * Close button text. Visible if both openText and closeText are provided.
407
- */
408
- closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
409
- /**
410
- * Accordion header variant
411
- */
412
- variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
413
- /**
414
- * Accordion header background
415
- */
416
- background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
417
- /**
418
- * Color of the indicator arrow
419
- */
420
- indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
421
- /**
422
- * Whether indicator is displayed before or after the main content
423
- */
424
- indicatorPosition = input("end", ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
425
- /**
426
- * Whether header is clickable
427
- */
428
- clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
429
- accordionItem = inject(AccordionItemComponent);
430
- opened = this.accordionItem.opened;
431
- headerId = this.accordionItem.headerId;
432
- contentId = this.accordionItem.contentId;
433
- toggleButtonText = computed(() => {
434
- if (this.openText() && this.closeText()) {
435
- return this.opened() ? this.closeText() : this.openText();
436
- }
437
- return;
438
- }, ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
439
- indicatorIconColor = computed(() => {
440
- if (this.indicatorColor()) {
441
- return this.indicatorColor();
442
- }
443
- return WHITE_ICON_VARIANTS.includes(this.variant())
444
- ? "white"
445
- : "brand";
446
- }, ...(ngDevMode ? [{ debugName: "indicatorIconColor" }] : []));
447
- toggle() {
448
- this.accordionItem.toggle();
449
- }
450
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
451
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "tedi-card-header, [tedi-card-header]", inputs: ["variant"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
452
- }
453
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
454
- type: Component,
455
- args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
456
- CardHeaderComponent,
457
- IconComponent,
458
- ButtonComponent,
459
- NgTemplateOutlet,
460
- ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
461
- "[class.tedi-accordion-item-header-host]": "true",
462
- }, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
463
- }], propDecorators: { indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
464
-
465
485
  /**
466
486
  * @deprecated Use CardRow from TEDI-ready instead. This component will be removed from future versions.
467
487
  */
@@ -1155,16 +1175,16 @@ class DropdownComponent {
1155
1175
  this.keyManager = new FocusKeyManager(this.dropdownItems, this.injector).withWrap();
1156
1176
  }
1157
1177
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1158
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: true, isRequired: true, transformFunction: null }, dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownItems", predicate: i0.forwardRef(() => DropdownItemComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n padding=\"none\"\n class=\"tedi-dropdown__card\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1178
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: true, isRequired: true, transformFunction: null }, dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownItems", predicate: i0.forwardRef(() => DropdownItemComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n class=\"tedi-dropdown__card\"\n background=\"primary\"\n [padding]=\"0\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content\n class=\"tedi-dropdown__mobile-header\"\n [autoWidth]=\"true\"\n [padding]=\"0.5\"\n >\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1159
1179
  }
1160
1180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, decorators: [{
1161
1181
  type: Component,
1162
1182
  args: [{ selector: "tedi-dropdown", imports: [
1163
1183
  OverlayModule,
1164
- CardComponent,
1165
- CardContentComponent,
1184
+ CardComponent$1,
1185
+ CardContentComponent$1,
1166
1186
  ClosingButtonComponent,
1167
- ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n padding=\"none\"\n class=\"tedi-dropdown__card\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"] }]
1187
+ ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"opened()\"\n [cdkConnectedOverlayOffsetY]=\"4\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"16\"\n cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n (overlayKeydown)=\"onKeyDown($event)\"\n (overlayOutsideClick)=\"close()\"\n>\n <tedi-card\n class=\"tedi-dropdown__card\"\n background=\"primary\"\n [padding]=\"0\"\n [attr.role]=\"dropdownRole()\"\n [attr.id]=\"dropdownId()\"\n >\n @if (isMobile()) {\n <tedi-card-content\n class=\"tedi-dropdown__mobile-header\"\n [autoWidth]=\"true\"\n [padding]=\"0.5\"\n >\n <button\n tedi-closing-button\n (click)=\"close()\"\n size=\"small\"\n class=\"tedi-dropdown__close-button\"\n ></button>\n </tedi-card-content>\n }\n <tedi-card-content>\n <ng-content />\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"] }]
1168
1188
  }], propDecorators: { dropdownId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownId", required: true }] }], dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownTriggerDirective), { isSignal: true }] }], dropdownItems: [{ type: i0.ContentChildren, args: [forwardRef(() => DropdownItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
1169
1189
 
1170
1190
  const itemRole = {
@@ -1489,7 +1509,7 @@ class SelectComponent {
1489
1509
  useExisting: forwardRef(() => SelectComponent),
1490
1510
  multi: true,
1491
1511
  },
1492
- ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1512
+ ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1493
1513
  }
1494
1514
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
1495
1515
  type: Component,
@@ -1498,8 +1518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
1498
1518
  OverlayModule,
1499
1519
  CdkListboxModule,
1500
1520
  InputComponent,
1501
- CardComponent,
1502
- CardContentComponent,
1521
+ CardComponent$1,
1522
+ CardContentComponent$1,
1503
1523
  DropdownItemComponent,
1504
1524
  ClosingButtonComponent,
1505
1525
  IconComponent,
@@ -1515,7 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
1515
1535
  useExisting: forwardRef(() => SelectComponent),
1516
1536
  multi: true,
1517
1537
  },
1518
- ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
1538
+ ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
1519
1539
  }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
1520
1540
  type: HostListener,
1521
1541
  args: ["window:resize"]
@@ -1912,7 +1932,7 @@ class MultiselectComponent {
1912
1932
  useExisting: forwardRef(() => MultiselectComponent),
1913
1933
  multi: true,
1914
1934
  },
1915
- ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1935
+ ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1916
1936
  }
1917
1937
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiselectComponent, decorators: [{
1918
1938
  type: Component,
@@ -1921,8 +1941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
1921
1941
  OverlayModule,
1922
1942
  CdkListboxModule,
1923
1943
  InputComponent,
1924
- CardComponent,
1925
- CardContentComponent,
1944
+ CardComponent$1,
1945
+ CardContentComponent$1,
1926
1946
  DropdownItemComponent,
1927
1947
  ClosingButtonComponent,
1928
1948
  IconComponent,
@@ -1940,7 +1960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
1940
1960
  useExisting: forwardRef(() => MultiselectComponent),
1941
1961
  multi: true,
1942
1962
  },
1943
- ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
1963
+ ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
1944
1964
  }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], clearableTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableTags", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
1945
1965
  type: HostListener,
1946
1966
  args: ["window:resize"]
@@ -2210,7 +2230,7 @@ class SearchComponent {
2210
2230
  useExisting: forwardRef(() => SearchComponent),
2211
2231
  multi: true,
2212
2232
  },
2213
- ], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2233
+ ], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card\n class=\"tedi-search__panel\"\n background=\"primary\"\n [style.width.px]=\"_width()\"\n >\n @if (loading()) {\n <tedi-card-content [padding]=\"1\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content [padding]=\"0\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [padding]=\"1\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" [padding]=\"1\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0}.tedi-search__panel.tedi-card{max-height:300px;overflow-y:auto}.tedi-search__footer-content:not(:empty){border-top:1px solid var(--card-border-primary)}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2214
2234
  }
2215
2235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
2216
2236
  type: Component,
@@ -2220,8 +2240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
2220
2240
  IconComponent,
2221
2241
  CdkMenuModule,
2222
2242
  OverlayModule,
2223
- CardComponent,
2224
- CardContentComponent,
2243
+ CardComponent$1,
2244
+ CardContentComponent$1,
2225
2245
  DropdownItemComponent,
2226
2246
  ClosingButtonComponent,
2227
2247
  A11yModule,
@@ -2240,7 +2260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
2240
2260
  useExisting: forwardRef(() => SearchComponent),
2241
2261
  multi: true,
2242
2262
  },
2243
- ], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"] }]
2263
+ ], template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card\n class=\"tedi-search__panel\"\n background=\"primary\"\n [style.width.px]=\"_width()\"\n >\n @if (loading()) {\n <tedi-card-content [padding]=\"1\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content [padding]=\"0\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [padding]=\"1\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" [padding]=\"1\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0}.tedi-search__panel.tedi-card{max-height:300px;overflow-y:auto}.tedi-search__footer-content:not(:empty){border-top:1px solid var(--card-border-primary)}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"] }]
2244
2264
  }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], autocompleteOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteOptions", required: false }] }], autocompleteFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteFrom", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], withButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clearEvent: [{ type: i0.Output, args: ["clearEvent"] }], _inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "_inputValue", required: false }] }, { type: i0.Output, args: ["_inputValueChange"] }], _selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "_selectedOption", required: false }] }, { type: i0.Output, args: ["_selectedOptionChange"] }], _cdkMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenu), { ...{ read: ElementRef }, isSignal: true }] }], _overlayOriginRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }] } });
2245
2265
 
2246
2266
  const IECkiloBytes = 1024;
@@ -2909,6 +2929,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
2909
2929
  ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-pagination\">\n @if (!hideResults()) {\n <span\n tedi-text\n class=\"tedi-pagination__results\"\n color=\"secondary\"\n modifiers=\"small\"\n >{{ \"pagination.results\" | tediTranslate: length() }}</span\n >\n }\n <nav\n [attr.aria-label]=\"'pagination.title' | tediTranslate\"\n class=\"tedi-pagination__pager\"\n >\n <ul class=\"tedi-pagination__pages\">\n <li>\n <button\n tedi-button\n [disabled]=\"!hasPreviousButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(-1)\"\n [attr.aria-label]=\"'pagination.prev-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_back\" />\n </button>\n </li>\n @for (pageNr of pages(); track $index) {\n <li>\n <tedi-pagination-page\n [page]=\"pageNr\"\n [active]=\"pageNr === page()\"\n (pageSelected)=\"selectPage(pageNr)\"\n />\n </li>\n }\n <li>\n <button\n tedi-button\n [disabled]=\"!hasNextButton()\"\n class=\"tedi-pagination__nav-button\"\n size=\"small\"\n variant=\"neutral\"\n type=\"button\"\n (click)=\"changePage(1)\"\n [attr.aria-label]=\"'pagination.next-page' | tediTranslate\"\n >\n <tedi-icon name=\"arrow_forward\" />\n </button>\n </li>\n </ul>\n </nav>\n\n @if (!hidePageSize()) {\n <div class=\"tedi-pagination__page-size-options\">\n <label tedi-text color=\"secondary\" modifiers=\"small\" [for]=\"dropdownId\">{{\n \"pagination.page-size\" | tediTranslate\n }}</label>\n <select\n [id]=\"dropdownId\"\n [(ngModel)]=\"pageSize\"\n (change)=\"pageSizeChanged()\"\n class=\"tedi-pagination__dropdown\"\n >\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n }\n</div>\n", styles: [".tedi-pagination{--_pagination-border: var(--general-border-secondary, #9293a4);--_pagination-background: var(--general-surface-primary, #fff);--_pagination-page-background: transparent;--_pagination-page-text: var(--general-text-secondary, #4b4e62);--_pagination-layout: \"results page-size-options\" \"pager pager\";--_pagination-padding-y: var(--pagination-padding-y);--_pagination-padding-x: var(--pagination-padding-x);--_pagination-button-size: var(--pagination-button-size);border-top:1px solid var(--_pagination-border);background:var(--_pagination-background);padding:var(--_pagination-padding-y) var(--_pagination-padding-x);display:grid;align-items:center;grid-template-areas:var(--_pagination-layout);gap:var(--layout-grid-gutters-04)}@media(min-width:48rem){.tedi-pagination{--_pagination-layout: \"results pager page-size-options\";grid-template-columns:repeat(3,1fr)}}.tedi-pagination__results{grid-area:results}.tedi-pagination__pager{grid-area:pager;justify-self:center}.tedi-pagination__pages{display:flex;justify-items:center;align-items:center;list-style:none;margin:0;gap:var(--layout-grid-gutters-08)}.tedi-pagination__page{display:flex;justify-content:center;align-items:center;height:100%;width:100%;flex-shrink:0;border-radius:50%;border:none;background:var(--_pagination-page-background);color:var(--_pagination-page-text);cursor:pointer}.tedi-pagination__page:hover{--_pagination-page-background: var( --button-main-neutral-icon-only-background-hover, #e7f0f6 );--_pagination-page-text: var(--button-main-neutral-text-hover, #004277)}.tedi-pagination__page:active{--_pagination-page-background: var( --button-main-neutral-icon-only-background-active, #d0e1ee );--_pagination-page-text: var(--button-main-neutral-text-active, #003662)}.tedi-pagination__page:focus{--_pagination-page-background: var( --button-main-neutral-icon-only-background-focus, rgba(0, 0, 0, 0) );--_pagination-page-text: var(--button-main-neutral-text-focus, #005aa3)}.tedi-pagination__page.tedi-pagination__page--active{--_pagination-page-background: var( --general-surface-brand-secondary, #004277 );--_pagination-page-text: var(--general-text-white, #fff);pointer-events:none}.tedi-pagination__nav-button.tedi-button[disabled]{color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}.tedi-pagination__page-size-options{grid-area:page-size-options;display:flex;align-items:center;justify-self:flex-end;gap:var(--form-field-inner-spacing)}.tedi-pagination__dropdown{border:1px solid var(--form-input-border-default, #838494);border-radius:var(--form-field-radius);min-height:var(--form-field-height-sm)}\n"] }]
2910
2930
  }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], hideResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideResults", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }] } });
2911
2931
 
2932
+ /**
2933
+ * @deprecated Use the TEDI-Ready `tedi-table-of-contents-item` from `@tedi-design-system/angular` instead.
2934
+ */
2912
2935
  class TableOfContentsItemComponent {
2913
2936
  idTo = input.required(...(ngDevMode ? [{ debugName: "idTo" }] : []));
2914
2937
  selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
@@ -2931,6 +2954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
2931
2954
  args: [{ selector: "tedi-table-of-contents-item", imports: [ButtonComponent], template: "<div [class]=\"classes()\">\n <a\n tedi-button\n variant=\"neutral\"\n class=\"table-of-contents__item-anchor\"\n (click)=\"itemClick()\"\n >\n <ng-content />\n </a>\n\n <ng-content\n select=\"tedi-table-of-contents-item,tedi-table-of-contents-nested-wrapper\"\n />\n</div>\n", styles: [".table-of-contents__item{display:flex;flex-direction:column;gap:var(--tedi-dimensions-05)}.table-of-contents__item--active .table-of-contents__item-anchor{border-color:var(--link-primary-default);color:var(--link-primary-active)}.table-of-contents__item--active .table-of-contents__item-anchor:hover{border-color:var(--link-primary-active)}.table-of-contents__item .table-of-contents__item .table-of-contents__item-anchor{padding-left:var(--table-of-contents-padding-left-level-2)}.table-of-contents__item-anchor{display:flex;align-items:flex-start;flex-direction:column;--_table-of-contents-inset: 1px;padding:0 calc(var(--table-of-contents-padding-level-1) - var(--_table-of-contents-inset));border:0;border-left:var(--table-of-contents-active-item-border-width) solid transparent;border-radius:0;margin-left:-var(--_table-of-contents-inset)}.table-of-contents__item-anchor:hover{text-decoration:underline}\n"] }]
2932
2955
  }], propDecorators: { idTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "idTo", required: true }] }] } });
2933
2956
 
2957
+ /**
2958
+ * @deprecated Use the TEDI-Ready TableOfContents from `@tedi-design-system/angular` instead:
2959
+ * `tedi-table-of-contents` with `tedi-table-of-contents-item`.
2960
+ */
2934
2961
  class TableOfContentsComponent {
2935
2962
  /**
2936
2963
  * Heading of the table of contents
@@ -3122,19 +3149,19 @@ class TableOfContentsComponent {
3122
3149
  this.intersectionObservers = [];
3123
3150
  }
3124
3151
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3125
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card>\n <tedi-card-content class=\"table-of-contents__content\">\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
3152
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card background=\"primary\" [padding]=\"0\">\n <tedi-card-content\n class=\"table-of-contents__content\"\n [padding]=\"{ top: 0, right: 0, bottom: 1, left: 0 }\"\n >\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\" background=\"primary\" [padding]=\"0\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
3126
3153
  }
3127
3154
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, decorators: [{
3128
3155
  type: Component,
3129
3156
  args: [{ selector: "tedi-table-of-contents", imports: [
3130
- CardComponent,
3131
- CardContentComponent,
3157
+ CardComponent$1,
3158
+ CardContentComponent$1,
3132
3159
  TextComponent,
3133
3160
  ButtonComponent,
3134
3161
  IconComponent,
3135
3162
  TediTranslationPipe,
3136
3163
  NgTemplateOutlet,
3137
- ], template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card>\n <tedi-card-content class=\"table-of-contents__content\">\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
3164
+ ], template: "<ng-template #defaultTemplate>\n <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n <tedi-card background=\"primary\" [padding]=\"0\">\n <tedi-card-content\n class=\"table-of-contents__content\"\n [padding]=\"{ top: 0, right: 0, bottom: 1, left: 0 }\"\n >\n <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n {{ heading() }}\n </h1>\n <div class=\"table-of-contents__items\">\n <ng-content />\n </div>\n </tedi-card-content>\n </tedi-card>\n </nav>\n</ng-template>\n\n@if (!isOpen()) {\n <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n <tedi-card [class]=\"footerClasses()\" background=\"primary\" [padding]=\"0\">\n <tedi-card-content>\n <button\n class=\"table-of-contents__footer-trigger\"\n (click)=\"openMobileModal()\"\n >\n <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n {{ heading() }}\n\n <div tedi-button variant=\"neutral\">\n {{ \"open\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" />\n </div>\n </h1>\n </button>\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
3138
3165
  }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], scrollOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOnClick", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], modalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalBreakpoint", required: false }] }], scrollAware: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAware", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ["defaultTemplate", { isSignal: true }] }], tableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableOfContentsItemComponent), { ...{
3139
3166
  descendants: true,
3140
3167
  }, isSignal: true }] }] } });
@@ -3144,6 +3171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
3144
3171
  * Workaround for https://github.com/angular/angular/issues/57345,
3145
3172
  * which is a issue when you use `@if() {}` syntax inside a component that uses ng-content.
3146
3173
  */
3174
+ /**
3175
+ * @deprecated Use the TEDI-Ready TableOfContents from `@tedi-design-system/angular` instead:
3176
+ * nest `tedi-table-of-contents-item` elements directly, no wrapper needed.
3177
+ */
3147
3178
  class TableOfContentsNestedWrapperComponent {
3148
3179
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsNestedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3149
3180
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TableOfContentsNestedWrapperComponent, isStandalone: true, selector: "tedi-table-of-contents-nested-wrapper", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
@@ -3273,21 +3304,21 @@ class TabsComponent {
3273
3304
  .withHorizontalOrientation("ltr");
3274
3305
  }
3275
3306
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3276
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsComponent, isStandalone: true, selector: "tedi-tabs", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.tedi-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "tabContents", predicate: TabContentComponent, isSignal: true }], ngImport: i0, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3307
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsComponent, isStandalone: true, selector: "tedi-tabs", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.tedi-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "tabContents", predicate: TabContentComponent, isSignal: true }], ngImport: i0, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card background=\"primary\" [padding]=\"0\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 1, vertical: 1.5 }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card\n class=\"tedi-tabs__mobile-dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n >\n <tedi-card-content\n class=\"tedi-tabs__mobile-header\"\n [autoWidth]=\"true\"\n [padding]=\"0.5\"\n >\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3277
3308
  }
3278
3309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, decorators: [{
3279
3310
  type: Component,
3280
3311
  args: [{ selector: "tedi-tabs", imports: [
3281
3312
  CommonModule,
3282
- CardComponent,
3283
- CardContentComponent,
3313
+ CardComponent$1,
3314
+ CardContentComponent$1,
3284
3315
  ClosingButtonComponent,
3285
3316
  IconComponent,
3286
3317
  TediTranslationPipe,
3287
3318
  ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
3288
3319
  "[class.tedi-tabs]": "true",
3289
3320
  "(keydown)": "onKeyDown($event)",
3290
- }, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
3321
+ }, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card background=\"primary\" [padding]=\"0\">\n <tedi-card-content>\n <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n @if (!mobileTabsOpened()) {\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n }\n <button\n aria-haspopup=\"menu\"\n (click)=\"mobileTabsOpened.set(true)\"\n class=\"tedi-tab tedi-tab--more-btn\"\n >\n {{ \"more\" | tediTranslate }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n </div>\n </tedi-card-content>\n\n <tedi-card-content\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"activeTabId()\"\n [padding]=\"{ horizontal: 1, vertical: 1.5 }\"\n >\n @if (activeTabContent(); as activeContent) {\n <ng-container *ngTemplateOutlet=\"activeContent\" />\n }\n <ng-content></ng-content>\n </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n <tedi-card\n class=\"tedi-tabs__mobile-dropdown\"\n background=\"primary\"\n [padding]=\"0\"\n >\n <tedi-card-content\n class=\"tedi-tabs__mobile-header\"\n [autoWidth]=\"true\"\n [padding]=\"0.5\"\n >\n <button\n tedi-closing-button\n size=\"small\"\n (click)=\"mobileTabsOpened.set(false)\"\n ></button>\n </tedi-card-content>\n <tedi-card-content class=\"tedi-tabs__mobile-list\">\n <ng-container *ngTemplateOutlet=\"tabsList\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
3291
3322
  }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabContentComponent), { isSignal: true }] }] } });
3292
3323
 
3293
3324
  class VerticalStepperComponent {