@tedi-design-system/angular 6.2.0-rc.7 → 6.2.0-rc.9

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 (7) hide show
  1. package/fesm2022/tedi-design-system-angular-tedi.mjs +62 -11
  2. package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/tedi/components/form/date-picker/date-picker.component.d.ts +12 -1
  5. package/tedi/components/form/date-picker/date-picker.component.d.ts.map +1 -1
  6. package/tedi/components/overlay/popover/popover.component.d.ts +7 -1
  7. package/tedi/components/overlay/popover/popover.component.d.ts.map +1 -1
package/fesm2022/tedi-design-system-angular-tedi.mjs CHANGED
@@ -4,10 +4,10 @@ import * as i1 from '@angular/cdk/layout';
4
4
  import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf } from '@angular/common';
5
5
  import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
6
6
  import { ComponentPortal } from '@angular/cdk/portal';
7
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
8
  import * as i1$1 from 'ngx-float-ui';
8
9
  import { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
9
10
  import { LiveAnnouncer, CdkTrapFocus, _IdGenerator } from '@angular/cdk/a11y';
10
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
11
11
  import { trigger, state, transition, style, animate } from '@angular/animations';
12
12
  import { RouterLink } from '@angular/router';
13
13
 
@@ -2420,6 +2420,12 @@ class PopoverComponent {
2420
2420
  * @default false
2421
2421
  */
2422
2422
  lockScroll = input(false);
2423
+ /**
2424
+ * Append floating element to given selector.
2425
+ * Use 'body' to append at the end of DOM or empty string to append next to trigger element.
2426
+ * @default "body"
2427
+ */
2428
+ appendTo = input("body");
2423
2429
  /** Delay time (in ms) for closing popover when not hovering trigger or content.
2424
2430
  * @default 100
2425
2431
  */
@@ -2593,11 +2599,11 @@ class PopoverComponent {
2593
2599
  this.hidePopover(true);
2594
2600
  }
2595
2601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2596
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n #floatUiComponent\n looseTrigger=\"none\"\n ariaRole=\"dialog\"\n appendTo=\"body\"\n [floatUiLoose]=\"floatUiComponent\"\n [targetElement]=\"popoverTrigger().host.nativeElement\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [applyClass]=\"floatUiContainerClass()\"\n [disableAnimation]=\"true\"\n>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n #floatUiComponent\n looseTrigger=\"none\"\n ariaRole=\"dialog\"\n [appendTo]=\"appendTo()\"\n [floatUiLoose]=\"floatUiComponent\"\n [targetElement]=\"popoverTrigger().host.nativeElement\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [applyClass]=\"floatUiContainerClass()\"\n [disableAnimation]=\"true\"\n>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2597
2603
  }
2598
2604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, decorators: [{
2599
2605
  type: Component,
2600
- args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n #floatUiComponent\n looseTrigger=\"none\"\n ariaRole=\"dialog\"\n appendTo=\"body\"\n [floatUiLoose]=\"floatUiComponent\"\n [targetElement]=\"popoverTrigger().host.nativeElement\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [applyClass]=\"floatUiContainerClass()\"\n [disableAnimation]=\"true\"\n>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
2606
+ args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n #floatUiComponent\n looseTrigger=\"none\"\n ariaRole=\"dialog\"\n [appendTo]=\"appendTo()\"\n [floatUiLoose]=\"floatUiComponent\"\n [targetElement]=\"popoverTrigger().host.nativeElement\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [applyClass]=\"floatUiContainerClass()\"\n [disableAnimation]=\"true\"\n>\n <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
2601
2607
  }] });
2602
2608
 
2603
2609
  class DropdownTriggerDirective {
@@ -3263,6 +3269,18 @@ let datePickerId = 0;
3263
3269
  class DatePickerComponent {
3264
3270
  today = new Date();
3265
3271
  uniqueId = `tedi-date-picker-id-${datePickerId++}`;
3272
+ formDisabled = signal(false);
3273
+ onChange = () => { };
3274
+ onTouched = () => { };
3275
+ emitIfChanged(value) {
3276
+ const current = this.selected();
3277
+ const changed = value === null
3278
+ ? current !== null
3279
+ : !current || !isSameDay(value, current);
3280
+ if (changed) {
3281
+ this.onChange(value);
3282
+ }
3283
+ }
3266
3284
  /** Selected date */
3267
3285
  selected = model(null);
3268
3286
  /** Currently shown month */
@@ -3289,6 +3307,8 @@ class DatePickerComponent {
3289
3307
  inputSize = input("default");
3290
3308
  /** Is input disabled? */
3291
3309
  inputDisabled = input(false);
3310
+ /** Internal computed for combined disabled state (inputDisabled + formDisabled from reactive forms) */
3311
+ fieldDisabled = computed(() => this.inputDisabled() || this.formDisabled());
3292
3312
  /** Is manual typing into input allowed? */
3293
3313
  allowManualInput = input(true);
3294
3314
  /** Should show week numbers before calendar grid? */
@@ -3422,6 +3442,20 @@ class DatePickerComponent {
3422
3442
  }
3423
3443
  this.activeDate.set(active);
3424
3444
  }
3445
+ // ControlValueAccessor implementation
3446
+ writeValue(value) {
3447
+ this.selected.set(value);
3448
+ this.inputValue.set(value ? formatDate(value) : "");
3449
+ }
3450
+ registerOnChange(fn) {
3451
+ this.onChange = fn;
3452
+ }
3453
+ registerOnTouched(fn) {
3454
+ this.onTouched = fn;
3455
+ }
3456
+ setDisabledState(disabled) {
3457
+ this.formDisabled.set(disabled);
3458
+ }
3425
3459
  getTabIndex(date) {
3426
3460
  const active = this.activeDate();
3427
3461
  return active && date.toDateString() === active.toDateString() ? 0 : -1;
@@ -3453,6 +3487,7 @@ class DatePickerComponent {
3453
3487
  selectDay(day) {
3454
3488
  if (day.disabled)
3455
3489
  return;
3490
+ this.emitIfChanged(day.date);
3456
3491
  this.selected.set(day.date);
3457
3492
  this.inputValue.set(formatDate(day.date));
3458
3493
  if (this.closeOnSelect()) {
@@ -3626,11 +3661,13 @@ class DatePickerComponent {
3626
3661
  }
3627
3662
  }
3628
3663
  onInputBlur() {
3664
+ this.onTouched();
3629
3665
  if (!this.allowManualInput())
3630
3666
  return;
3631
3667
  const selected = this.selected();
3632
3668
  const parsed = parseDate(this.inputValue());
3633
3669
  if (parsed) {
3670
+ this.emitIfChanged(parsed);
3634
3671
  this.selected.set(parsed);
3635
3672
  this.month.set(parsed);
3636
3673
  }
@@ -3651,12 +3688,14 @@ class DatePickerComponent {
3651
3688
  }
3652
3689
  }
3653
3690
  clearInput() {
3691
+ this.emitIfChanged(null);
3654
3692
  this.inputValue.set("");
3655
3693
  this.selected.set(null);
3656
3694
  }
3657
3695
  closeCalendar() {
3658
3696
  this.popover().floatUiComponent().hide();
3659
3697
  this.inputElement().nativeElement.focus();
3698
+ this.onTouched();
3660
3699
  }
3661
3700
  openCalendar() {
3662
3701
  let active = this.selected() ?? this.today;
@@ -3802,7 +3841,13 @@ class DatePickerComponent {
3802
3841
  return null;
3803
3842
  }
3804
3843
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3805
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "tedi-date-picker", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, startYear: { classPropertyName: "startYear", publicName: "startYear", isSignal: true, isRequired: false, transformFunction: null }, endYear: { classPropertyName: "endYear", publicName: "endYear", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputState: { classPropertyName: "inputState", publicName: "inputState", isSignal: true, isRequired: false, transformFunction: null }, inputSize: { classPropertyName: "inputSize", publicName: "inputSize", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", month: "monthChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!inputDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"inputDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"inputDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"inputDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ 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: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3844
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "tedi-date-picker", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, startYear: { classPropertyName: "startYear", publicName: "startYear", isSignal: true, isRequired: false, transformFunction: null }, endYear: { classPropertyName: "endYear", publicName: "endYear", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputState: { classPropertyName: "inputState", publicName: "inputState", isSignal: true, isRequired: false, transformFunction: null }, inputSize: { classPropertyName: "inputSize", publicName: "inputSize", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", month: "monthChange" }, providers: [
3845
+ {
3846
+ provide: NG_VALUE_ACCESSOR,
3847
+ useExisting: forwardRef(() => DatePickerComponent),
3848
+ multi: true,
3849
+ },
3850
+ ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ 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: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3806
3851
  }
3807
3852
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
3808
3853
  type: Component,
@@ -3819,7 +3864,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
3819
3864
  DatePickerMonthGridComponent,
3820
3865
  DatePickerYearGridComponent,
3821
3866
  TediTranslationPipe
3822
- ], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!inputDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"inputDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"inputDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"inputDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
3867
+ ], providers: [
3868
+ {
3869
+ provide: NG_VALUE_ACCESSOR,
3870
+ useExisting: forwardRef(() => DatePickerComponent),
3871
+ multi: true,
3872
+ },
3873
+ ], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
3823
3874
  }], ctorParameters: () => [] });
3824
3875
 
3825
3876
  class FeedbackTextComponent {
@@ -5249,7 +5300,7 @@ class HeaderLanguageComponent {
5249
5300
  this.popover?.floatUiComponent().hide();
5250
5301
  }
5251
5302
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5252
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: i0.forwardRef(() => PopoverComponent), descendants: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [":root{--_header-language-transition-duration: .3s}.tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language tedi-popover-trigger tedi-icon{transition:transform var(--_header-language-transition-duration) ease}.tedi-header-language tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-language__label{display:none}@media (min-width: 576px){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5303
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: i0.forwardRef(() => PopoverComponent), descendants: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [":root{--_header-language-transition-duration: .3s}.tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language tedi-popover-trigger tedi-icon{transition:transform var(--_header-language-transition-duration) ease}.tedi-header-language tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-language__label{display:none}@media (min-width: 576px){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5253
5304
  }
5254
5305
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
5255
5306
  type: Component,
@@ -5263,7 +5314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5263
5314
  TediTranslationPipe,
5264
5315
  ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5265
5316
  class: "tedi-header-language",
5266
- }, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [":root{--_header-language-transition-duration: .3s}.tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language tedi-popover-trigger tedi-icon{transition:transform var(--_header-language-transition-duration) ease}.tedi-header-language tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-language__label{display:none}@media (min-width: 576px){.tedi-header-language__label{display:block}}\n"] }]
5317
+ }, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ languages()[translationService.getLanguage()] }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n <button\n *ngFor=\"let language of languageKeys()\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n </tedi-popover-content>\n</tedi-popover>\n", styles: [":root{--_header-language-transition-duration: .3s}.tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language tedi-popover-trigger tedi-icon{transition:transform var(--_header-language-transition-duration) ease}.tedi-header-language tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-language__label{display:none}@media (min-width: 576px){.tedi-header-language__label{display:block}}\n"] }]
5267
5318
  }], propDecorators: { popover: [{
5268
5319
  type: ViewChild,
5269
5320
  args: [forwardRef(() => PopoverComponent)]
@@ -5408,7 +5459,7 @@ class HeaderProfileComponent {
5408
5459
  }
5409
5460
  }
5410
5461
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5411
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5412
5463
  }
5413
5464
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, decorators: [{
5414
5465
  type: Component,
@@ -5422,7 +5473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5422
5473
  HideAtDirective,
5423
5474
  NgTemplateOutlet,
5424
5475
  TediTranslationPipe,
5425
- ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"] }]
5476
+ ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n <ng-container *hideAt=\"dropdown\">\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"\n breakpointService.isBelowBreakpoint('sm')() || !name()\n ? translationService.track('header.profile')()\n : null\n \"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n </ng-container>\n\n <ng-container *showAt=\"dropdown\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <tedi-popover-content maxWidth=\"small\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n} @else {\n <button\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [class]=\"buttonClass()\"\n [variant]=\"buttonVariant()\"\n (click)=\"handleModalOpen()\"\n >\n @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n <tedi-icon\n [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n color=\"brand\"\n />\n {{ \"header.profile\" | tediTranslate }}\n } @else {\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n />\n {{ name() }}\n @if (name()) {\n <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n }\n }\n </button>\n <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div class=\"tedi-header-profile__modal\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"] }]
5426
5477
  }], ctorParameters: () => [] });
5427
5478
 
5428
5479
  class HeaderRoleComponent {
@@ -5475,7 +5526,7 @@ class HeaderRoleComponent {
5475
5526
  this.inputValue.set(value);
5476
5527
  }
5477
5528
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5478
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showInput: { classPropertyName: "showInput", publicName: "showInput", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange" }, host: { classAttribute: "tedi-header-role" }, ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div class=\"tedi-header-role__head\">\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [attr.data-multiple]=\"representatives().length > 1\"\n >\n <b>{{ role() }} {{ currentRepresentative().name }}</b>\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (representatives().length > 1) {\n <button tedi-button variant=\"neutral\" (click)=\"handleMobileOpen()\">\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (representatives().length > 1) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse__items\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (role() || description()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n >\n @if (role()) {\n <b>{{ role() }}</b>\n }\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"representatives().length > 1; else normalText\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showInput()) {\n <div>\n <label for=\"representative-input\">{{ searchText() }}</label>\n <input\n id=\"representative-input\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n <button\n *ngFor=\"let r of filteredRepresentatives()\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"\n r.name === currentRepresentative().name &&\n r.description === currentRepresentative().description\n \"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (r.icon) {\n <tedi-icon [name]=\"r.icon\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div>\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div>{{ currentRepresentative().name }}</div>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-role__head{display:flex;gap:4px;align-items:center;justify-content:space-between;width:100%}@media (min-width: 992px){.tedi-header-role__head{justify-content:flex-start}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:row;gap:var(--layout-grid-gutters-16)}.tedi-header-role__head .tedi-header-role__info[data-multiple=true]{flex-direction:column;gap:0}.tedi-header-role__head .tedi-header-role__info[data-multiple=true] .tedi-header-role__description:before{display:none}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description{position:relative}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description:before{position:absolute;top:50%;left:calc(-1 * var(--layout-grid-gutters-16) / 2);width:1px;height:1rem;content:\"\";background:var(--general-border-secondary);transform:translateY(-50%)}.tedi-header-role__head button tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(180deg)}.tedi-header-role tedi-popover-trigger tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)!important}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__representative{display:flex;gap:8px;align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:1fr}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse__items{visibility:visible}.tedi-header-role__collapse__items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse__items>*:not(:first-child){position:relative}.tedi-header-role__collapse__items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5529
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showInput: { classPropertyName: "showInput", publicName: "showInput", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange" }, host: { classAttribute: "tedi-header-role" }, ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div class=\"tedi-header-role__head\">\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [attr.data-multiple]=\"representatives().length > 1\"\n >\n <b>{{ role() }} {{ currentRepresentative().name }}</b>\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (representatives().length > 1) {\n <button tedi-button variant=\"neutral\" (click)=\"handleMobileOpen()\">\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (representatives().length > 1) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse__items\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (role() || description()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n >\n @if (role()) {\n <b>{{ role() }}</b>\n }\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"representatives().length > 1; else normalText\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showInput()) {\n <div>\n <label for=\"representative-input\">{{ searchText() }}</label>\n <input\n id=\"representative-input\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n <button\n *ngFor=\"let r of filteredRepresentatives()\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"\n r.name === currentRepresentative().name &&\n r.description === currentRepresentative().description\n \"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (r.icon) {\n <tedi-icon [name]=\"r.icon\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div>\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div>{{ currentRepresentative().name }}</div>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-role__head{display:flex;gap:4px;align-items:center;justify-content:space-between;width:100%}@media (min-width: 992px){.tedi-header-role__head{justify-content:flex-start}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:row;gap:var(--layout-grid-gutters-16)}.tedi-header-role__head .tedi-header-role__info[data-multiple=true]{flex-direction:column;gap:0}.tedi-header-role__head .tedi-header-role__info[data-multiple=true] .tedi-header-role__description:before{display:none}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description{position:relative}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description:before{position:absolute;top:50%;left:calc(-1 * var(--layout-grid-gutters-16) / 2);width:1px;height:1rem;content:\"\";background:var(--general-border-secondary);transform:translateY(-50%)}.tedi-header-role__head button tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(180deg)}.tedi-header-role tedi-popover-trigger tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)!important}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__representative{display:flex;gap:8px;align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:1fr}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse__items{visibility:visible}.tedi-header-role__collapse__items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse__items>*:not(:first-child){position:relative}.tedi-header-role__collapse__items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5479
5530
  }
5480
5531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderRoleComponent, decorators: [{
5481
5532
  type: Component,
@@ -5493,7 +5544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5493
5544
  HideAtDirective,
5494
5545
  ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5495
5546
  class: "tedi-header-role",
5496
- }, template: "<ng-container *hideAt=\"'lg'\">\n <div class=\"tedi-header-role__head\">\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [attr.data-multiple]=\"representatives().length > 1\"\n >\n <b>{{ role() }} {{ currentRepresentative().name }}</b>\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (representatives().length > 1) {\n <button tedi-button variant=\"neutral\" (click)=\"handleMobileOpen()\">\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (representatives().length > 1) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse__items\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (role() || description()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n >\n @if (role()) {\n <b>{{ role() }}</b>\n }\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"representatives().length > 1; else normalText\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showInput()) {\n <div>\n <label for=\"representative-input\">{{ searchText() }}</label>\n <input\n id=\"representative-input\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n <button\n *ngFor=\"let r of filteredRepresentatives()\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"\n r.name === currentRepresentative().name &&\n r.description === currentRepresentative().description\n \"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (r.icon) {\n <tedi-icon [name]=\"r.icon\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div>\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div>{{ currentRepresentative().name }}</div>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-role__head{display:flex;gap:4px;align-items:center;justify-content:space-between;width:100%}@media (min-width: 992px){.tedi-header-role__head{justify-content:flex-start}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:row;gap:var(--layout-grid-gutters-16)}.tedi-header-role__head .tedi-header-role__info[data-multiple=true]{flex-direction:column;gap:0}.tedi-header-role__head .tedi-header-role__info[data-multiple=true] .tedi-header-role__description:before{display:none}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description{position:relative}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description:before{position:absolute;top:50%;left:calc(-1 * var(--layout-grid-gutters-16) / 2);width:1px;height:1rem;content:\"\";background:var(--general-border-secondary);transform:translateY(-50%)}.tedi-header-role__head button tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(180deg)}.tedi-header-role tedi-popover-trigger tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)!important}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__representative{display:flex;gap:8px;align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:1fr}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse__items{visibility:visible}.tedi-header-role__collapse__items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse__items>*:not(:first-child){position:relative}.tedi-header-role__collapse__items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
5547
+ }, template: "<ng-container *hideAt=\"'lg'\">\n <div class=\"tedi-header-role__head\">\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [attr.data-multiple]=\"representatives().length > 1\"\n >\n <b>{{ role() }} {{ currentRepresentative().name }}</b>\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (representatives().length > 1) {\n <button tedi-button variant=\"neutral\" (click)=\"handleMobileOpen()\">\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (representatives().length > 1) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse__items\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (role() || description()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n >\n @if (role()) {\n <b>{{ role() }}</b>\n }\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n <ng-container *ngIf=\"representatives().length > 1; else normalText\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n >\n <span>{{ currentRepresentative().name }}</span>\n <tedi-icon name=\"expand_more\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-popover-content>\n </tedi-popover>\n </ng-container>\n</ng-container>\n\n<ng-template #content>\n @if (showInput()) {\n <div>\n <label for=\"representative-input\">{{ searchText() }}</label>\n <input\n id=\"representative-input\"\n class=\"tedi-header-role__input\"\n [value]=\"inputValue()\"\n (input)=\"handleInputChange($event)\"\n />\n </div>\n }\n @if (filteredRepresentatives().length === 0) {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n <button\n *ngFor=\"let r of filteredRepresentatives()\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"\n r.name === currentRepresentative().name &&\n r.description === currentRepresentative().description\n \"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (r.icon) {\n <tedi-icon [name]=\"r.icon\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div>\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n</ng-template>\n\n<ng-template #normalText>\n <div>{{ currentRepresentative().name }}</div>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-role__head{display:flex;gap:4px;align-items:center;justify-content:space-between;width:100%}@media (min-width: 992px){.tedi-header-role__head{justify-content:flex-start}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:row;gap:var(--layout-grid-gutters-16)}.tedi-header-role__head .tedi-header-role__info[data-multiple=true]{flex-direction:column;gap:0}.tedi-header-role__head .tedi-header-role__info[data-multiple=true] .tedi-header-role__description:before{display:none}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description{position:relative}.tedi-header-role__head .tedi-header-role__info .tedi-header-role__description:before{position:absolute;top:50%;left:calc(-1 * var(--layout-grid-gutters-16) / 2);width:1px;height:1rem;content:\"\";background:var(--general-border-secondary);transform:translateY(-50%)}.tedi-header-role__head button tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(180deg)}.tedi-header-role tedi-popover-trigger tedi-icon{transition:transform var(--_header-role-transition-duration) ease}.tedi-header-role tedi-popover-trigger[data-open=true] tedi-icon{transform:rotate(180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)!important}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__representative{display:flex;gap:8px;align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:0fr;width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:1fr}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse__items{visibility:visible}.tedi-header-role__collapse__items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse__items>*:not(:first-child){position:relative}.tedi-header-role__collapse__items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
5497
5548
  }] });
5498
5549
 
5499
5550
  class SideNavService {