@tedi-design-system/angular 6.1.0 → 6.2.0-rc.10
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.
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts +2 -2
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +1 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts +1 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts.map +1 -1
- package/community/components/tags/status-badge/status-badge.component.d.ts +3 -0
- package/community/components/tags/status-badge/status-badge.component.d.ts.map +1 -1
- package/community/components/tags/tag/tag.component.d.ts +3 -0
- package/community/components/tags/tag/tag.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +16 -10
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +235 -58
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +2 -2
- package/tedi/components/buttons/closing-button/closing-button.component.d.ts +6 -2
- package/tedi/components/buttons/closing-button/closing-button.component.d.ts.map +1 -1
- package/tedi/components/content/carousel/carousel-content/carousel-content.component.d.ts +22 -1
- package/tedi/components/content/carousel/carousel-content/carousel-content.component.d.ts.map +1 -1
- package/tedi/components/form/date-picker/date-picker.component.d.ts +12 -3
- package/tedi/components/form/date-picker/date-picker.component.d.ts.map +1 -1
- package/tedi/components/index.d.ts +1 -0
- package/tedi/components/index.d.ts.map +1 -1
- package/tedi/components/overlay/popover/popover.component.d.ts +12 -1
- package/tedi/components/overlay/popover/popover.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts +3 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts.map +1 -1
- package/tedi/components/tags/index.d.ts +2 -0
- package/tedi/components/tags/index.d.ts.map +1 -0
- package/tedi/components/tags/tag/tag.component.d.ts +34 -0
- package/tedi/components/tags/tag/tag.component.d.ts.map +1 -0
- package/tedi/providers/tedi.provider.d.ts.map +1 -1
- package/tedi/services/theme/theme.service.d.ts +3 -3
- package/tedi/services/theme/theme.service.d.ts.map +1 -1
- package/tedi/tokens/theme.token.d.ts +1 -2
- package/tedi/tokens/theme.token.d.ts.map +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
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
|
-
import { LiveAnnouncer, CdkTrapFocus } from '@angular/cdk/a11y';
|
|
10
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
|
+
import { LiveAnnouncer, CdkTrapFocus, _IdGenerator } from '@angular/cdk/a11y';
|
|
11
11
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
12
12
|
import { RouterLink } from '@angular/router';
|
|
13
13
|
|
|
@@ -1379,7 +1379,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1379
1379
|
|
|
1380
1380
|
const TEDI_THEME_DEFAULT_TOKEN = new InjectionToken("TEDI_THEME_DEFAULT_TOKEN");
|
|
1381
1381
|
|
|
1382
|
-
const AVAILABLE_THEMES = ["default", "dark", "rit"];
|
|
1383
1382
|
const THEME_CLASS_PREFIX = "tedi-theme--";
|
|
1384
1383
|
const THEME_COOKIE_NAME = "tedi-theme";
|
|
1385
1384
|
const THEME_FALLBACK_VALUE = "default";
|
|
@@ -1390,10 +1389,14 @@ class ThemeService {
|
|
|
1390
1389
|
constructor() {
|
|
1391
1390
|
effect(() => {
|
|
1392
1391
|
const html = this.document.documentElement;
|
|
1393
|
-
|
|
1394
|
-
|
|
1392
|
+
const nextTheme = this.theme();
|
|
1393
|
+
for (let i = html.classList.length - 1; i >= 0; i--) {
|
|
1394
|
+
const className = html.classList.item(i);
|
|
1395
|
+
if (className?.startsWith(THEME_CLASS_PREFIX)) {
|
|
1396
|
+
html.classList.remove(className);
|
|
1397
|
+
}
|
|
1395
1398
|
}
|
|
1396
|
-
html.classList.add(`${THEME_CLASS_PREFIX}${
|
|
1399
|
+
html.classList.add(`${THEME_CLASS_PREFIX}${nextTheme}`);
|
|
1397
1400
|
});
|
|
1398
1401
|
}
|
|
1399
1402
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -1436,16 +1439,20 @@ class ClosingButtonComponent {
|
|
|
1436
1439
|
* @default 24
|
|
1437
1440
|
*/
|
|
1438
1441
|
iconSize = input(24);
|
|
1442
|
+
/**
|
|
1443
|
+
* ARIA label to override default label "close"
|
|
1444
|
+
*/
|
|
1445
|
+
ariaLabel = input();
|
|
1439
1446
|
translationService = inject(TediTranslationService);
|
|
1440
|
-
|
|
1447
|
+
_defaultLabel = this.translationService.track("close");
|
|
1441
1448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "
|
|
1449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "ariaLabel() || _defaultLabel()", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" } }, ngImport: i0, template: "<tedi-icon name=\"close\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1443
1450
|
}
|
|
1444
1451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ClosingButtonComponent, decorators: [{
|
|
1445
1452
|
type: Component,
|
|
1446
1453
|
args: [{ selector: "button[tedi-closing-button]", imports: [IconComponent], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1447
|
-
"[title]": "
|
|
1448
|
-
"[attr.aria-label]": "
|
|
1454
|
+
"[title]": "ariaLabel() || _defaultLabel()",
|
|
1455
|
+
"[attr.aria-label]": "ariaLabel() || _defaultLabel()",
|
|
1449
1456
|
"[class.tedi-closing-button]": "true",
|
|
1450
1457
|
"[class.tedi-closing-button--small]": "size() === 'small'",
|
|
1451
1458
|
}, template: "<tedi-icon name=\"close\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"] }]
|
|
@@ -1541,7 +1548,7 @@ class AlertComponent {
|
|
|
1541
1548
|
}
|
|
1542
1549
|
}
|
|
1543
1550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "@if (title()) {\n <div class=\"tedi-alert__head\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n }\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <div class=\"tedi-alert__content\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n}\n@if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-alert__close\"\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose()\"\n ></button>\n}\n\n<ng-template #heading>\n @if (titleElement() === \"h1\") {\n <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n } @else if (titleElement() === \"h2\") {\n <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n } @else if (titleElement() === \"h3\") {\n <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n } @else if (titleElement() === \"h4\") {\n <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n } @else if (titleElement() === \"h5\") {\n <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n } @else if (titleElement() === \"h6\") {\n <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n } @else {\n <div class=\"tedi-alert__title\">{{ title() }}</div>\n }\n</ng-template>\n\n<ng-template #content>\n <div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "@if (title()) {\n <div class=\"tedi-alert__head\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n }\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <div class=\"tedi-alert__content\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n}\n@if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-alert__close\"\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose()\"\n ></button>\n}\n\n<ng-template #heading>\n @if (titleElement() === \"h1\") {\n <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n } @else if (titleElement() === \"h2\") {\n <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n } @else if (titleElement() === \"h3\") {\n <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n } @else if (titleElement() === \"h4\") {\n <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n } @else if (titleElement() === \"h5\") {\n <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n } @else if (titleElement() === \"h6\") {\n <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n } @else {\n <div class=\"tedi-alert__title\">{{ title() }}</div>\n }\n</ng-template>\n\n<ng-template #content>\n <div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1545
1552
|
}
|
|
1546
1553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1547
1554
|
type: Component,
|
|
@@ -2369,7 +2376,7 @@ class PopoverContentComponent {
|
|
|
2369
2376
|
this.popover.hidePopover(true);
|
|
2370
2377
|
}
|
|
2371
2378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2373
2380
|
}
|
|
2374
2381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverContentComponent, decorators: [{
|
|
2375
2382
|
type: Component,
|
|
@@ -2384,6 +2391,11 @@ class PopoverComponent {
|
|
|
2384
2391
|
* @default top
|
|
2385
2392
|
*/
|
|
2386
2393
|
position = input("top");
|
|
2394
|
+
/**
|
|
2395
|
+
* Should position flip to opposite direction when overflowing screen?
|
|
2396
|
+
* @default false
|
|
2397
|
+
*/
|
|
2398
|
+
preventOverflow = input(false);
|
|
2387
2399
|
/**
|
|
2388
2400
|
* Is dismissible by clicking outside of content?
|
|
2389
2401
|
* @default true
|
|
@@ -2408,6 +2420,12 @@ class PopoverComponent {
|
|
|
2408
2420
|
* @default false
|
|
2409
2421
|
*/
|
|
2410
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");
|
|
2411
2429
|
/** Delay time (in ms) for closing popover when not hovering trigger or content.
|
|
2412
2430
|
* @default 100
|
|
2413
2431
|
*/
|
|
@@ -2581,11 +2599,11 @@ class PopoverComponent {
|
|
|
2581
2599
|
this.hidePopover(true);
|
|
2582
2600
|
}
|
|
2583
2601
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2584
|
-
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 }, 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=\"
|
|
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 });
|
|
2585
2603
|
}
|
|
2586
2604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2587
2605
|
type: Component,
|
|
2588
|
-
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=\"
|
|
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"] }]
|
|
2589
2607
|
}] });
|
|
2590
2608
|
|
|
2591
2609
|
class DropdownTriggerDirective {
|
|
@@ -3251,6 +3269,18 @@ let datePickerId = 0;
|
|
|
3251
3269
|
class DatePickerComponent {
|
|
3252
3270
|
today = new Date();
|
|
3253
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
|
+
}
|
|
3254
3284
|
/** Selected date */
|
|
3255
3285
|
selected = model(null);
|
|
3256
3286
|
/** Currently shown month */
|
|
@@ -3277,6 +3307,8 @@ class DatePickerComponent {
|
|
|
3277
3307
|
inputSize = input("default");
|
|
3278
3308
|
/** Is input disabled? */
|
|
3279
3309
|
inputDisabled = input(false);
|
|
3310
|
+
/** Internal computed for combined disabled state (inputDisabled + formDisabled from reactive forms) */
|
|
3311
|
+
fieldDisabled = computed(() => this.inputDisabled() || this.formDisabled());
|
|
3280
3312
|
/** Is manual typing into input allowed? */
|
|
3281
3313
|
allowManualInput = input(true);
|
|
3282
3314
|
/** Should show week numbers before calendar grid? */
|
|
@@ -3393,7 +3425,6 @@ class DatePickerComponent {
|
|
|
3393
3425
|
inputElement = viewChild.required("inputElement");
|
|
3394
3426
|
calendarGrid = viewChild("gridElement");
|
|
3395
3427
|
popover = viewChild.required(PopoverComponent);
|
|
3396
|
-
translationService = inject(TediTranslationService);
|
|
3397
3428
|
constructor() {
|
|
3398
3429
|
effect(() => {
|
|
3399
3430
|
const selected = this.selected();
|
|
@@ -3411,6 +3442,20 @@ class DatePickerComponent {
|
|
|
3411
3442
|
}
|
|
3412
3443
|
this.activeDate.set(active);
|
|
3413
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
|
+
}
|
|
3414
3459
|
getTabIndex(date) {
|
|
3415
3460
|
const active = this.activeDate();
|
|
3416
3461
|
return active && date.toDateString() === active.toDateString() ? 0 : -1;
|
|
@@ -3442,6 +3487,7 @@ class DatePickerComponent {
|
|
|
3442
3487
|
selectDay(day) {
|
|
3443
3488
|
if (day.disabled)
|
|
3444
3489
|
return;
|
|
3490
|
+
this.emitIfChanged(day.date);
|
|
3445
3491
|
this.selected.set(day.date);
|
|
3446
3492
|
this.inputValue.set(formatDate(day.date));
|
|
3447
3493
|
if (this.closeOnSelect()) {
|
|
@@ -3615,11 +3661,13 @@ class DatePickerComponent {
|
|
|
3615
3661
|
}
|
|
3616
3662
|
}
|
|
3617
3663
|
onInputBlur() {
|
|
3664
|
+
this.onTouched();
|
|
3618
3665
|
if (!this.allowManualInput())
|
|
3619
3666
|
return;
|
|
3620
3667
|
const selected = this.selected();
|
|
3621
3668
|
const parsed = parseDate(this.inputValue());
|
|
3622
3669
|
if (parsed) {
|
|
3670
|
+
this.emitIfChanged(parsed);
|
|
3623
3671
|
this.selected.set(parsed);
|
|
3624
3672
|
this.month.set(parsed);
|
|
3625
3673
|
}
|
|
@@ -3640,12 +3688,14 @@ class DatePickerComponent {
|
|
|
3640
3688
|
}
|
|
3641
3689
|
}
|
|
3642
3690
|
clearInput() {
|
|
3691
|
+
this.emitIfChanged(null);
|
|
3643
3692
|
this.inputValue.set("");
|
|
3644
3693
|
this.selected.set(null);
|
|
3645
3694
|
}
|
|
3646
3695
|
closeCalendar() {
|
|
3647
3696
|
this.popover().floatUiComponent().hide();
|
|
3648
3697
|
this.inputElement().nativeElement.focus();
|
|
3698
|
+
this.onTouched();
|
|
3649
3699
|
}
|
|
3650
3700
|
openCalendar() {
|
|
3651
3701
|
let active = this.selected() ?? this.today;
|
|
@@ -3791,7 +3841,13 @@ class DatePickerComponent {
|
|
|
3791
3841
|
return null;
|
|
3792
3842
|
}
|
|
3793
3843
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3794
|
-
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 [attr.aria-label]=\"translationService.track('date-picker.clear-date')()\"\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 >\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]=\"\n translationService.track('date-picker.open-calendar')()\n \"\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"] }, { 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", "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"] }], 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 });
|
|
3795
3851
|
}
|
|
3796
3852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
3797
3853
|
type: Component,
|
|
@@ -3807,7 +3863,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3807
3863
|
DatePickerCalendarGridComponent,
|
|
3808
3864
|
DatePickerMonthGridComponent,
|
|
3809
3865
|
DatePickerYearGridComponent,
|
|
3810
|
-
], 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 [attr.aria-label]=\"translationService.track('date-picker.clear-date')()\"\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 >\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]=\"\n translationService.track('date-picker.open-calendar')()\n \"\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"] }]
|
|
3866
|
+
TediTranslationPipe
|
|
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"] }]
|
|
3811
3874
|
}], ctorParameters: () => [] });
|
|
3812
3875
|
|
|
3813
3876
|
class FeedbackTextComponent {
|
|
@@ -4242,7 +4305,9 @@ class CarouselContentComponent {
|
|
|
4242
4305
|
translationService = inject(TediTranslationService);
|
|
4243
4306
|
breakpointService = inject(BreakpointService);
|
|
4244
4307
|
host = inject(ElementRef);
|
|
4308
|
+
liveAnnouncer = inject(LiveAnnouncer);
|
|
4245
4309
|
track = viewChild.required("track");
|
|
4310
|
+
slideElements = viewChildren("slide");
|
|
4246
4311
|
slides = contentChildren(CarouselSlideDirective);
|
|
4247
4312
|
trackIndex = signal(0);
|
|
4248
4313
|
animate = signal(false);
|
|
@@ -4309,6 +4374,15 @@ class CarouselContentComponent {
|
|
|
4309
4374
|
renderedActiveIndex = computed(() => {
|
|
4310
4375
|
return this.trackIndex() - this.windowBase() + this.buffer();
|
|
4311
4376
|
});
|
|
4377
|
+
/**
|
|
4378
|
+
* Checks if a slide at the given rendered index is currently visible in the viewport.
|
|
4379
|
+
* Used to determine which slides should be accessible to screen readers.
|
|
4380
|
+
*/
|
|
4381
|
+
isSlideVisible(renderedIndex) {
|
|
4382
|
+
const activeIndex = this.renderedActiveIndex();
|
|
4383
|
+
const slidesPerView = Math.ceil(this.currentSlidesPerView());
|
|
4384
|
+
return renderedIndex >= activeIndex && renderedIndex < activeIndex + slidesPerView;
|
|
4385
|
+
}
|
|
4312
4386
|
renderedIndices = computed(() => {
|
|
4313
4387
|
const slidesCount = this.slides().length;
|
|
4314
4388
|
if (!slidesCount) {
|
|
@@ -4358,11 +4432,17 @@ class CarouselContentComponent {
|
|
|
4358
4432
|
});
|
|
4359
4433
|
locked = false;
|
|
4360
4434
|
dragging = false;
|
|
4435
|
+
pendingFocus = false;
|
|
4361
4436
|
startX = 0;
|
|
4362
4437
|
startIndex = 0;
|
|
4363
4438
|
ro;
|
|
4364
4439
|
wheelTimeout;
|
|
4365
4440
|
scrollDelta = 0;
|
|
4441
|
+
onScroll() {
|
|
4442
|
+
// Prevent any scroll triggered by focus (e.g., VoiceOver navigation)
|
|
4443
|
+
this.host.nativeElement.scrollLeft = 0;
|
|
4444
|
+
this.host.nativeElement.scrollTop = 0;
|
|
4445
|
+
}
|
|
4366
4446
|
onWheel(event) {
|
|
4367
4447
|
const slidesCount = this.slides().length;
|
|
4368
4448
|
if (!slidesCount) {
|
|
@@ -4496,6 +4576,7 @@ class CarouselContentComponent {
|
|
|
4496
4576
|
this.animate.set(true);
|
|
4497
4577
|
this.trackIndex.update((i) => i + 1);
|
|
4498
4578
|
this.lockNavigation();
|
|
4579
|
+
this.announceSlideChange();
|
|
4499
4580
|
}
|
|
4500
4581
|
prev() {
|
|
4501
4582
|
if (!this.slides().length || this.locked) {
|
|
@@ -4504,8 +4585,9 @@ class CarouselContentComponent {
|
|
|
4504
4585
|
this.animate.set(true);
|
|
4505
4586
|
this.trackIndex.update((i) => i - 1);
|
|
4506
4587
|
this.lockNavigation();
|
|
4588
|
+
this.announceSlideChange();
|
|
4507
4589
|
}
|
|
4508
|
-
goToIndex(index) {
|
|
4590
|
+
goToIndex(index, options) {
|
|
4509
4591
|
const slidesCount = this.slides().length;
|
|
4510
4592
|
if (!slidesCount || this.locked) {
|
|
4511
4593
|
return;
|
|
@@ -4515,6 +4597,26 @@ class CarouselContentComponent {
|
|
|
4515
4597
|
const delta = normalized - current;
|
|
4516
4598
|
this.animate.set(true);
|
|
4517
4599
|
this.trackIndex.update((i) => i + delta);
|
|
4600
|
+
if (options?.focusSlide) {
|
|
4601
|
+
// Focus after transition completes so DOM positions are stable
|
|
4602
|
+
this.pendingFocus = true;
|
|
4603
|
+
}
|
|
4604
|
+
else {
|
|
4605
|
+
this.announceSlideChange();
|
|
4606
|
+
}
|
|
4607
|
+
}
|
|
4608
|
+
/**
|
|
4609
|
+
* Focuses the currently active slide for screen reader users.
|
|
4610
|
+
* Uses preventScroll to avoid breaking carousel layout.
|
|
4611
|
+
*/
|
|
4612
|
+
focusActiveSlide() {
|
|
4613
|
+
setTimeout(() => {
|
|
4614
|
+
const activeIndex = this.renderedActiveIndex();
|
|
4615
|
+
const slideElement = this.slideElements()[activeIndex];
|
|
4616
|
+
if (slideElement) {
|
|
4617
|
+
slideElement.nativeElement.focus({ preventScroll: true });
|
|
4618
|
+
}
|
|
4619
|
+
});
|
|
4518
4620
|
}
|
|
4519
4621
|
onTransitionEnd(e) {
|
|
4520
4622
|
if (e.target !== this.track().nativeElement ||
|
|
@@ -4524,13 +4626,29 @@ class CarouselContentComponent {
|
|
|
4524
4626
|
}
|
|
4525
4627
|
this.animate.set(false);
|
|
4526
4628
|
this.windowBase.set(Math.floor(this.trackIndex()));
|
|
4629
|
+
if (this.pendingFocus) {
|
|
4630
|
+
this.pendingFocus = false;
|
|
4631
|
+
this.focusActiveSlide();
|
|
4632
|
+
}
|
|
4527
4633
|
}
|
|
4528
4634
|
lockNavigation() {
|
|
4529
4635
|
this.locked = true;
|
|
4530
4636
|
setTimeout(() => (this.locked = false), this.transitionMs());
|
|
4531
4637
|
}
|
|
4638
|
+
/**
|
|
4639
|
+
* Announces the current slide position to screen readers via LiveAnnouncer.
|
|
4640
|
+
* Called after navigation to inform users of the slide change.
|
|
4641
|
+
*/
|
|
4642
|
+
announceSlideChange() {
|
|
4643
|
+
setTimeout(() => {
|
|
4644
|
+
const slideNumber = this.slideIndex() + 1;
|
|
4645
|
+
const totalSlides = this.slides().length;
|
|
4646
|
+
const message = this.translationService.translate("carousel.slide", slideNumber, totalSlides);
|
|
4647
|
+
this.liveAnnouncer.announce(message, "polite");
|
|
4648
|
+
}, 100);
|
|
4649
|
+
}
|
|
4532
4650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4533
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "translationService.track('carousel')()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #track\n class=\"tedi-carousel__track\"\n [style]=\"trackStyle()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n @for (idx of renderedIndices(); track $index) {\n <div\n class=\"tedi-carousel__slide\"\n [attr.role]=\"$index
|
|
4651
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "scroll": "onScroll()", "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "translationService.track('carousel')()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "slideElements", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #track\n class=\"tedi-carousel__track\"\n [style]=\"trackStyle()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n @for (idx of renderedIndices(); track $index) {\n <div\n #slide\n class=\"tedi-carousel__slide\"\n [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"\n translationService.track('carousel.slide', idx + 1, slides().length)()\n \"\n [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n [style.flex]=\"slideFlex()\"\n >\n <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n </div>\n }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4534
4652
|
}
|
|
4535
4653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselContentComponent, decorators: [{
|
|
4536
4654
|
type: Component,
|
|
@@ -4541,8 +4659,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4541
4659
|
"[attr.aria-label]": "translationService.track('carousel')()",
|
|
4542
4660
|
"aria-live": "off",
|
|
4543
4661
|
"[class]": "classes()",
|
|
4544
|
-
}, template: "<div\n #track\n class=\"tedi-carousel__track\"\n [style]=\"trackStyle()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n @for (idx of renderedIndices(); track $index) {\n <div\n class=\"tedi-carousel__slide\"\n [attr.role]=\"$index
|
|
4545
|
-
}], propDecorators: {
|
|
4662
|
+
}, template: "<div\n #track\n class=\"tedi-carousel__track\"\n [style]=\"trackStyle()\"\n (transitionend)=\"onTransitionEnd($event)\"\n>\n @for (idx of renderedIndices(); track $index) {\n <div\n #slide\n class=\"tedi-carousel__slide\"\n [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"\n translationService.track('carousel.slide', idx + 1, slides().length)()\n \"\n [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n [style.flex]=\"slideFlex()\"\n >\n <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n </div>\n }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-03))}\n"] }]
|
|
4663
|
+
}], propDecorators: { onScroll: [{
|
|
4664
|
+
type: HostListener,
|
|
4665
|
+
args: ["scroll"]
|
|
4666
|
+
}], onWheel: [{
|
|
4546
4667
|
type: HostListener,
|
|
4547
4668
|
args: ["wheel", ["$event"]]
|
|
4548
4669
|
}], onKeyDown: [{
|
|
@@ -4612,7 +4733,7 @@ class CarouselIndicatorsComponent {
|
|
|
4612
4733
|
this.carousel.carouselContent().prev();
|
|
4613
4734
|
}
|
|
4614
4735
|
handleIndicatorClick(index) {
|
|
4615
|
-
this.carousel.carouselContent().goToIndex(index);
|
|
4736
|
+
this.carousel.carouselContent().goToIndex(index, { focusSlide: true });
|
|
4616
4737
|
}
|
|
4617
4738
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4618
4739
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarouselIndicatorsComponent, isStandalone: true, selector: "tedi-carousel-indicators", inputs: { withArrows: { classPropertyName: "withArrows", publicName: "withArrows", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (withArrows()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"translationService.track('carousel.moveBack')()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n}\n\n@if (variant() === \"dots\") {\n @for (indicator of indicatorsArray(); track indicator.index) {\n <button\n type=\"button\"\n class=\"tedi-carousel__indicator\"\n [attr.aria-label]=\"\n translationService.track('carousel.showSlide', indicator.index + 1)()\n \"\n [ngClass]=\"indicator.active ? 'tedi-carousel__indicator--active' : null\"\n (click)=\"handleIndicatorClick(indicator.index)\"\n ></button>\n }\n} @else if (activeSlideNumber()) {\n <div>\n <b tedi-text color=\"brand\">{{ activeSlideNumber() }}</b>\n <span tedi-text color=\"tertiary\"> / {{ indicatorsArray().length }}</span>\n </div>\n}\n\n@if (withArrows()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"translationService.track('carousel.moveForward')()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n}\n", styles: ["tedi-carousel-indicators{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;min-height:24px}.tedi-carousel__indicator{position:relative;width:24px;height:24px;cursor:pointer;background:none;border:none}.tedi-carousel__indicator:after{position:absolute;top:50%;left:50%;width:22px;height:8px;content:\"\";background-color:transparent;border:1px solid var(--tedi-primary-600);border-radius:100px;transform:translate(-50%,-50%)}.tedi-carousel__indicator:hover:after{border-color:var(--tedi-primary-700)}.tedi-carousel__indicator:active:after{background-color:var(--tedi-primary-800);border-color:var(--tedi-primary-800)}.tedi-carousel__indicator:focus-visible:after{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-carousel__indicator--active:after{background-color:var(--tedi-primary-600)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -5179,7 +5300,7 @@ class HeaderLanguageComponent {
|
|
|
5179
5300
|
this.popover?.floatUiComponent().hide();
|
|
5180
5301
|
}
|
|
5181
5302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5182
|
-
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", "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 });
|
|
5183
5304
|
}
|
|
5184
5305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
|
|
5185
5306
|
type: Component,
|
|
@@ -5193,7 +5314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5193
5314
|
TediTranslationPipe,
|
|
5194
5315
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5195
5316
|
class: "tedi-header-language",
|
|
5196
|
-
}, 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"] }]
|
|
5197
5318
|
}], propDecorators: { popover: [{
|
|
5198
5319
|
type: ViewChild,
|
|
5199
5320
|
args: [forwardRef(() => PopoverComponent)]
|
|
@@ -5338,7 +5459,7 @@ class HeaderProfileComponent {
|
|
|
5338
5459
|
}
|
|
5339
5460
|
}
|
|
5340
5461
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5341
|
-
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", "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 });
|
|
5342
5463
|
}
|
|
5343
5464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, decorators: [{
|
|
5344
5465
|
type: Component,
|
|
@@ -5352,7 +5473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5352
5473
|
HideAtDirective,
|
|
5353
5474
|
NgTemplateOutlet,
|
|
5354
5475
|
TediTranslationPipe,
|
|
5355
|
-
], 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"] }]
|
|
5356
5477
|
}], ctorParameters: () => [] });
|
|
5357
5478
|
|
|
5358
5479
|
class HeaderRoleComponent {
|
|
@@ -5405,7 +5526,7 @@ class HeaderRoleComponent {
|
|
|
5405
5526
|
this.inputValue.set(value);
|
|
5406
5527
|
}
|
|
5407
5528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5408
|
-
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", "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 });
|
|
5409
5530
|
}
|
|
5410
5531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderRoleComponent, decorators: [{
|
|
5411
5532
|
type: Component,
|
|
@@ -5423,7 +5544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5423
5544
|
HideAtDirective,
|
|
5424
5545
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5425
5546
|
class: "tedi-header-role",
|
|
5426
|
-
}, 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"] }]
|
|
5427
5548
|
}] });
|
|
5428
5549
|
|
|
5429
5550
|
class SideNavService {
|
|
@@ -5593,30 +5714,41 @@ class TooltipTriggerComponent {
|
|
|
5593
5714
|
renderer = inject(Renderer2);
|
|
5594
5715
|
tooltip = inject(TooltipComponent);
|
|
5595
5716
|
interactiveElement = signal(null);
|
|
5717
|
+
isTouch = false;
|
|
5596
5718
|
constructor() {
|
|
5597
5719
|
effect(() => {
|
|
5598
5720
|
const element = this.interactiveElement();
|
|
5599
5721
|
if (!element)
|
|
5600
5722
|
return;
|
|
5601
|
-
|
|
5602
|
-
const isOpen = this.tooltip.isOpen();
|
|
5603
|
-
element.setAttribute("aria-describedby", descriptionId);
|
|
5604
|
-
element.setAttribute("aria-expanded", String(isOpen));
|
|
5723
|
+
element.setAttribute("aria-describedby", this.tooltip.descriptionId);
|
|
5605
5724
|
});
|
|
5606
5725
|
}
|
|
5726
|
+
onTouchStart() {
|
|
5727
|
+
this.isTouch = true;
|
|
5728
|
+
}
|
|
5729
|
+
onTouchEnd() {
|
|
5730
|
+
this.tooltip.toggleTooltip();
|
|
5731
|
+
setTimeout(() => (this.isTouch = false), 300);
|
|
5732
|
+
}
|
|
5607
5733
|
onClick() {
|
|
5734
|
+
if (this.isTouch)
|
|
5735
|
+
return;
|
|
5608
5736
|
if (this.tooltip.openWith() === "both" ||
|
|
5609
5737
|
this.tooltip.openWith() === "click") {
|
|
5610
5738
|
this.tooltip.toggleTooltip();
|
|
5611
5739
|
}
|
|
5612
5740
|
}
|
|
5613
5741
|
onMouseEnter() {
|
|
5742
|
+
if (this.isTouch)
|
|
5743
|
+
return;
|
|
5614
5744
|
if (this.tooltip.openWith() === "both" ||
|
|
5615
5745
|
this.tooltip.openWith() === "hover") {
|
|
5616
5746
|
this.tooltip.showTooltip();
|
|
5617
5747
|
}
|
|
5618
5748
|
}
|
|
5619
5749
|
onMouseLeave() {
|
|
5750
|
+
if (this.isTouch)
|
|
5751
|
+
return;
|
|
5620
5752
|
if (this.tooltip.openWith() === "both" ||
|
|
5621
5753
|
this.tooltip.openWith() === "hover") {
|
|
5622
5754
|
clearTimeout(this.tooltip.hideTimeout);
|
|
@@ -5626,15 +5758,18 @@ class TooltipTriggerComponent {
|
|
|
5626
5758
|
}
|
|
5627
5759
|
}
|
|
5628
5760
|
onFocusIn() {
|
|
5761
|
+
if (this.isTouch)
|
|
5762
|
+
return;
|
|
5629
5763
|
if (this.tooltip.openWith() === "both" ||
|
|
5630
5764
|
this.tooltip.openWith() === "hover") {
|
|
5631
5765
|
this.tooltip.showTooltip();
|
|
5632
5766
|
}
|
|
5633
5767
|
}
|
|
5634
5768
|
onFocusOut() {
|
|
5635
|
-
if (this.
|
|
5769
|
+
if (this.isTouch)
|
|
5770
|
+
return;
|
|
5771
|
+
if (this.tooltip.isContentHovered())
|
|
5636
5772
|
return;
|
|
5637
|
-
}
|
|
5638
5773
|
if (this.tooltip.openWith() === "both" ||
|
|
5639
5774
|
this.tooltip.openWith() === "hover") {
|
|
5640
5775
|
this.tooltip.hideTooltip();
|
|
@@ -5667,12 +5802,18 @@ class TooltipTriggerComponent {
|
|
|
5667
5802
|
this.interactiveElement.set(firstChild);
|
|
5668
5803
|
}
|
|
5669
5804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5670
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5671
5806
|
}
|
|
5672
5807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
|
|
5673
5808
|
type: Component,
|
|
5674
|
-
args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5675
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
5809
|
+
args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5810
|
+
}], ctorParameters: () => [], propDecorators: { onTouchStart: [{
|
|
5811
|
+
type: HostListener,
|
|
5812
|
+
args: ["touchstart"]
|
|
5813
|
+
}], onTouchEnd: [{
|
|
5814
|
+
type: HostListener,
|
|
5815
|
+
args: ["touchend"]
|
|
5816
|
+
}], onClick: [{
|
|
5676
5817
|
type: HostListener,
|
|
5677
5818
|
args: ["click"]
|
|
5678
5819
|
}], onMouseEnter: [{
|
|
@@ -5714,14 +5855,14 @@ class TooltipContentComponent {
|
|
|
5714
5855
|
this.tooltip.isContentHovered.set(false);
|
|
5715
5856
|
}
|
|
5716
5857
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5718
5859
|
}
|
|
5719
5860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
5720
5861
|
type: Component,
|
|
5721
5862
|
args: [{ standalone: true, selector: "tedi-tooltip-content", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5722
5863
|
"[class]": "classes()",
|
|
5723
5864
|
"aria-hidden": "true"
|
|
5724
|
-
}, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5865
|
+
}, styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5725
5866
|
}], propDecorators: { onMouseEnter: [{
|
|
5726
5867
|
type: HostListener,
|
|
5727
5868
|
args: ["mouseenter"]
|
|
@@ -5803,11 +5944,11 @@ class TooltipComponent {
|
|
|
5803
5944
|
}
|
|
5804
5945
|
}
|
|
5805
5946
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", 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: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n applyClass=\"float-ui-container-tooltip\"\n ariaRole=\"tooltip\"\n ariaHidden=\"true\"\n style=\"display: contents\"\n looseTrigger=\"none\"\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [disableAnimation]=\"true\"\n [targetElement]=\"tooltipTrigger().host.nativeElement\"\n [appendTo]=\"appendTo()\"\n>\n <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\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 });
|
|
5947
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", 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: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n applyClass=\"float-ui-container-tooltip\"\n ariaRole=\"tooltip\"\n ariaHidden=\"true\"\n style=\"display: contents\"\n looseTrigger=\"none\"\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [disableAnimation]=\"true\"\n [targetElement]=\"tooltipTrigger().host.nativeElement\"\n [appendTo]=\"appendTo()\"\n>\n <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\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 });
|
|
5807
5948
|
}
|
|
5808
5949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
5809
5950
|
type: Component,
|
|
5810
|
-
args: [{ standalone: true, selector: "tedi-tooltip", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n applyClass=\"float-ui-container-tooltip\"\n ariaRole=\"tooltip\"\n ariaHidden=\"true\"\n style=\"display: contents\"\n looseTrigger=\"none\"\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [disableAnimation]=\"true\"\n [targetElement]=\"tooltipTrigger().host.nativeElement\"\n [appendTo]=\"appendTo()\"\n>\n <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5951
|
+
args: [{ standalone: true, selector: "tedi-tooltip", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n applyClass=\"float-ui-container-tooltip\"\n ariaRole=\"tooltip\"\n ariaHidden=\"true\"\n style=\"display: contents\"\n looseTrigger=\"none\"\n [floatUiLoose]=\"floatUiComponent\"\n [loosePlacement]=\"position()\"\n [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n [disableAnimation]=\"true\"\n [targetElement]=\"tooltipTrigger().host.nativeElement\"\n [appendTo]=\"appendTo()\"\n>\n <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;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-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5811
5952
|
}] });
|
|
5812
5953
|
|
|
5813
5954
|
class SideNavItemComponent {
|
|
@@ -6070,7 +6211,7 @@ class SpinnerComponent {
|
|
|
6070
6211
|
return classList.join(" ");
|
|
6071
6212
|
});
|
|
6072
6213
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"
|
|
6214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:calc(var(--tedi-spinner-stroke, 2) * 44 / var(--tedi-spinner-size, 16));r:calc(22 - var(--tedi-spinner-stroke, 2) * 44 / var(--tedi-spinner-size, 16) / 2);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke: 1}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke: 2}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke: 4}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6074
6215
|
}
|
|
6075
6216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
6076
6217
|
type: Component,
|
|
@@ -6080,7 +6221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6080
6221
|
"aria-live": "polite",
|
|
6081
6222
|
"[attr.aria-label]": "label() ? label() : null",
|
|
6082
6223
|
"[attr.aria-hidden]": "!label()"
|
|
6083
|
-
}, template: "<svg viewBox=\"
|
|
6224
|
+
}, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle\n class=\"tedi-spinner--inner\"\n cx=\"22\"\n cy=\"22\"\n fill=\"none\"\n ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:calc(var(--tedi-spinner-stroke, 2) * 44 / var(--tedi-spinner-size, 16));r:calc(22 - var(--tedi-spinner-stroke, 2) * 44 / var(--tedi-spinner-size, 16) / 2);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media (prefers-reduced-motion: reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke: 1}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke: 2}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke: 4}@media (prefers-reduced-motion: reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"] }]
|
|
6084
6225
|
}] });
|
|
6085
6226
|
|
|
6086
6227
|
class ModalComponent {
|
|
@@ -6189,13 +6330,61 @@ class ModalHeaderComponent {
|
|
|
6189
6330
|
this.modal.open.set(false);
|
|
6190
6331
|
}
|
|
6191
6332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button tedi-closing-button (click)=\"closeModal()\"></button>\n }\n</div>\n<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:var(--modal-max-width-xs)}.tedi-modal--sm .tedi-modal__dialog{max-width:var(--modal-max-width-sm)}.tedi-modal--md .tedi-modal__dialog{max-width:var(--modal-max-width-md)}.tedi-modal--lg .tedi-modal__dialog{max-width:var(--modal-max-width-lg)}.tedi-modal--xl .tedi-modal__dialog{max-width:var(--modal-max-width-xl)}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:95dvh;transform:translate(-50%,-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;height:100%}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;height:100%}.tedi-modal__dialog{position:fixed;display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--borders-01) solid var(--modal-border-inner)}.tedi-modal tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal tedi-modal-header .tedi-modal-header__head button[tedi-closing-button]{margin-left:auto}.tedi-modal tedi-modal-content{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal tedi-modal-footer{display:flex;gap:var(--layout-grid-gutters-16);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--borders-01) solid var(--modal-border-inner)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button tedi-closing-button (click)=\"closeModal()\"></button>\n }\n</div>\n<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:var(--modal-max-width-xs)}.tedi-modal--sm .tedi-modal__dialog{max-width:var(--modal-max-width-sm)}.tedi-modal--md .tedi-modal__dialog{max-width:var(--modal-max-width-md)}.tedi-modal--lg .tedi-modal__dialog{max-width:var(--modal-max-width-lg)}.tedi-modal--xl .tedi-modal__dialog{max-width:var(--modal-max-width-xl)}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:95dvh;transform:translate(-50%,-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;height:100%}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;height:100%}.tedi-modal__dialog{position:fixed;display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--borders-01) solid var(--modal-border-inner)}.tedi-modal tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal tedi-modal-header .tedi-modal-header__head button[tedi-closing-button]{margin-left:auto}.tedi-modal tedi-modal-content{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal tedi-modal-footer{display:flex;gap:var(--layout-grid-gutters-16);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--borders-01) solid var(--modal-border-inner)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6193
6334
|
}
|
|
6194
6335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
6195
6336
|
type: Component,
|
|
6196
6337
|
args: [{ standalone: true, selector: "tedi-modal-header", imports: [ClosingButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button tedi-closing-button (click)=\"closeModal()\"></button>\n }\n</div>\n<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:var(--modal-max-width-xs)}.tedi-modal--sm .tedi-modal__dialog{max-width:var(--modal-max-width-sm)}.tedi-modal--md .tedi-modal__dialog{max-width:var(--modal-max-width-md)}.tedi-modal--lg .tedi-modal__dialog{max-width:var(--modal-max-width-lg)}.tedi-modal--xl .tedi-modal__dialog{max-width:var(--modal-max-width-xl)}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:95dvh;transform:translate(-50%,-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;height:100%}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;height:100%}.tedi-modal__dialog{position:fixed;display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--borders-01) solid var(--modal-border-inner)}.tedi-modal tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal tedi-modal-header .tedi-modal-header__head button[tedi-closing-button]{margin-left:auto}.tedi-modal tedi-modal-content{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal tedi-modal-footer{display:flex;gap:var(--layout-grid-gutters-16);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--borders-01) solid var(--modal-border-inner)}\n"] }]
|
|
6197
6338
|
}] });
|
|
6198
6339
|
|
|
6340
|
+
class TagComponent {
|
|
6341
|
+
idGenerator = inject(_IdGenerator);
|
|
6342
|
+
uniqueId = this.idGenerator.getId('tedi-tag');
|
|
6343
|
+
/**
|
|
6344
|
+
* Whether the tag is in loading state.
|
|
6345
|
+
* When true, a spinner will be displayed inside the tag.
|
|
6346
|
+
* @default false
|
|
6347
|
+
*/
|
|
6348
|
+
loading = input(false);
|
|
6349
|
+
/**
|
|
6350
|
+
* Whether the tag can be closed.
|
|
6351
|
+
* When true, a close button will be displayed that emits the 'closed' event when clicked.
|
|
6352
|
+
* @default false
|
|
6353
|
+
*/
|
|
6354
|
+
closable = input(false);
|
|
6355
|
+
/**
|
|
6356
|
+
* The visual style of the tag.
|
|
6357
|
+
* Possible values: 'primary', 'secondary', 'danger'
|
|
6358
|
+
* @default "primary"
|
|
6359
|
+
*/
|
|
6360
|
+
type = input("primary");
|
|
6361
|
+
/**
|
|
6362
|
+
* Event emitted when the close button is clicked.
|
|
6363
|
+
*/
|
|
6364
|
+
closed = output();
|
|
6365
|
+
classes = computed(() => {
|
|
6366
|
+
const classList = [];
|
|
6367
|
+
if (this.type()) {
|
|
6368
|
+
classList.push(`tedi-tag--${this.type()}`);
|
|
6369
|
+
}
|
|
6370
|
+
return classList.join(" ");
|
|
6371
|
+
});
|
|
6372
|
+
handleClose(event) {
|
|
6373
|
+
this.closed.emit(event);
|
|
6374
|
+
}
|
|
6375
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n <ng-content />\n</span>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n >\n </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { 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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6377
|
+
}
|
|
6378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, decorators: [{
|
|
6379
|
+
type: Component,
|
|
6380
|
+
args: [{ selector: "tedi-tag", imports: [SpinnerComponent, IconComponent, ClosingButtonComponent, TediTranslationPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6381
|
+
"[class.tedi-tag]": "true",
|
|
6382
|
+
"[class.tedi-tag--loading]": "loading()",
|
|
6383
|
+
"[class.tedi-tag--closable]": "closable()",
|
|
6384
|
+
"[class]": "classes()",
|
|
6385
|
+
}, template: "@if (type() === \"danger\") {\n <span class=\"tedi-tag__icon-wrapper\">\n <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n <ng-content />\n</span>\n\n@if (loading()) {\n <span class=\"tedi-tag__spinner-wrapper\">\n <tedi-spinner [size]=\"48\" />\n </span>\n} @else if (closable()) {\n <button\n type=\"button\"\n tedi-closing-button\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose($event)\"\n [attr.aria-describedby]=\"uniqueId\"\n [ariaLabel]=\"'remove' | tediTranslate\"\n >\n </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"] }]
|
|
6386
|
+
}] });
|
|
6387
|
+
|
|
6199
6388
|
class VerticalSpacingItemDirective {
|
|
6200
6389
|
el;
|
|
6201
6390
|
renderer;
|
|
@@ -6244,17 +6433,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6244
6433
|
}]
|
|
6245
6434
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
6246
6435
|
|
|
6247
|
-
function applyInitialTheme() {
|
|
6248
|
-
return () => {
|
|
6249
|
-
const document = inject(DOCUMENT);
|
|
6250
|
-
const defaultTheme = inject(TEDI_THEME_DEFAULT_TOKEN);
|
|
6251
|
-
const html = document.documentElement;
|
|
6252
|
-
for (const t of AVAILABLE_THEMES) {
|
|
6253
|
-
html.classList.remove(`${THEME_CLASS_PREFIX}${t}`);
|
|
6254
|
-
}
|
|
6255
|
-
html.classList.add(`${THEME_CLASS_PREFIX}${defaultTheme}`);
|
|
6256
|
-
};
|
|
6257
|
-
}
|
|
6258
6436
|
function provideTedi(config = {}) {
|
|
6259
6437
|
return makeEnvironmentProviders([
|
|
6260
6438
|
{
|
|
@@ -6265,7 +6443,6 @@ function provideTedi(config = {}) {
|
|
|
6265
6443
|
provide: TEDI_TRANSLATION_DEFAULT_TOKEN,
|
|
6266
6444
|
useValue: config.language ?? "et",
|
|
6267
6445
|
},
|
|
6268
|
-
provideAppInitializer(applyInitialTheme()),
|
|
6269
6446
|
]);
|
|
6270
6447
|
}
|
|
6271
6448
|
|
|
@@ -6273,5 +6450,5 @@ function provideTedi(config = {}) {
|
|
|
6273
6450
|
* Generated bundle index. Do not edit.
|
|
6274
6451
|
*/
|
|
6275
6452
|
|
|
6276
|
-
export { AVAILABLE_LANGUAGES,
|
|
6453
|
+
export { AVAILABLE_LANGUAGES, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
|
|
6277
6454
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|