@tedi-design-system/angular 8.2.0-rc.7 → 9.0.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/LICENSE +21 -0
- package/NOTICE.md +25 -0
- package/community/index.d.ts +2 -0
- package/community/index.d.ts.map +1 -1
- package/community/text-editor/index.d.ts +2 -0
- package/community/text-editor/index.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community-text-editor.mjs +2 -0
- package/fesm2022/tedi-design-system-angular-community-text-editor.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +5 -1
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +754 -123
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/icons/all.css +1 -0
- package/icons/outlined.css +1 -0
- package/icons/rounded.css +1 -0
- package/icons/sharp.css +1 -0
- package/index-without-icons.css +1 -0
- package/index.css +1 -1
- package/package.json +9 -2
- package/tedi/index.d.ts +267 -29
- package/tedi/index.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, TemplateRef, viewChild, viewChildren, untracked, afterNextRender, NgZone, linkedSignal, ErrorHandler, Optional, SkipSelf, HostAttributeToken, ViewChild,
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, DestroyRef, afterRenderEffect, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, TemplateRef, numberAttribute, viewChild, viewChildren, untracked, afterNextRender, NgZone, linkedSignal, ErrorHandler, Optional, SkipSelf, HostAttributeToken, ViewChild, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
4
4
|
import * as i1 from '@angular/cdk/overlay';
|
|
5
5
|
import { CdkOverlayOrigin, OverlayContainer, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
@@ -60,7 +60,8 @@ class IconComponent {
|
|
|
60
60
|
variant = input("outlined", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
61
61
|
/**
|
|
62
62
|
* Type of Material Symbols icon style.
|
|
63
|
-
* It is recommended to only use one type throughout your app
|
|
63
|
+
* It is recommended to only use one type throughout your app, and to load only that type's font
|
|
64
|
+
* (`icons/<type>.css` with `index-without-icons.css`) instead of all three via `index.css`.
|
|
64
65
|
* @default outlined
|
|
65
66
|
*/
|
|
66
67
|
type = input("outlined", ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
@@ -199,7 +200,7 @@ class BaseButtonDirective {
|
|
|
199
200
|
this.iconLast.set(iconIndexes.includes(nodes.length - 1));
|
|
200
201
|
}
|
|
201
202
|
classes = computed(() => {
|
|
202
|
-
const classList = [this.classNamePrefix()];
|
|
203
|
+
const classList = [this.classNamePrefix(), "no-print"];
|
|
203
204
|
if (this.iconOnly()) {
|
|
204
205
|
classList.push(`${this.classNamePrefix()}--icon-only`);
|
|
205
206
|
}
|
|
@@ -298,6 +299,7 @@ class ButtonGroupButtonDirective {
|
|
|
298
299
|
hostClasses = computed(() => [
|
|
299
300
|
"tedi-button",
|
|
300
301
|
"tedi-button-group-button",
|
|
302
|
+
"no-print",
|
|
301
303
|
`tedi-button--${this.effectiveVariant()}`,
|
|
302
304
|
`tedi-button--${this.effectiveSize()}`,
|
|
303
305
|
].join(" "), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
@@ -485,7 +487,11 @@ function breakpointInput(input) {
|
|
|
485
487
|
return { xs: input };
|
|
486
488
|
}
|
|
487
489
|
|
|
488
|
-
|
|
490
|
+
/** Native controls keep their own semantics and keyboard behavior. */
|
|
491
|
+
const NATIVE_INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea';
|
|
492
|
+
const FOCUSABLE_SELECTOR$1 = `${NATIVE_INTERACTIVE_SELECTOR}, [tabindex]`;
|
|
493
|
+
/** Native controls that fire `click` on Space but not on Enter. */
|
|
494
|
+
const SPACE_ACTIVATED_SELECTOR = 'input[type="checkbox"], input[type="radio"]';
|
|
489
495
|
class DropdownTriggerDirective {
|
|
490
496
|
/**
|
|
491
497
|
* The `aria-haspopup` value for the trigger, telling assistive technology
|
|
@@ -508,6 +514,8 @@ class DropdownTriggerDirective {
|
|
|
508
514
|
* would both be tab stops, and the ARIA state would land on the wrong element.
|
|
509
515
|
*/
|
|
510
516
|
triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : []));
|
|
517
|
+
/** Only a Space press that starts on the trigger may activate it on keyup. */
|
|
518
|
+
spacePressed = false;
|
|
511
519
|
hasPopup = computed(() => {
|
|
512
520
|
const explicit = this.ariaHaspopup();
|
|
513
521
|
if (explicit)
|
|
@@ -543,14 +551,21 @@ class DropdownTriggerDirective {
|
|
|
543
551
|
this.renderer.setAttribute(el, "aria-haspopup", hasPopup);
|
|
544
552
|
}
|
|
545
553
|
this.renderer.setAttribute(el, "aria-expanded", String(this.dropdown.isOpen()));
|
|
546
|
-
if (!this.isNativelyFocusable(el)) {
|
|
547
|
-
this.renderer.setAttribute(el, "role", "button");
|
|
548
|
-
this.renderer.setAttribute(el, "tabindex", "0");
|
|
549
|
-
}
|
|
550
554
|
});
|
|
551
555
|
}
|
|
552
556
|
ngAfterViewInit() {
|
|
553
|
-
this.
|
|
557
|
+
const el = this.resolveTriggerElement();
|
|
558
|
+
// Non-native triggers need button semantics, but a role or tabindex the
|
|
559
|
+
// consumer set (e.g. `role="checkbox"`) is theirs to keep.
|
|
560
|
+
if (!this.isNativelyInteractive(el)) {
|
|
561
|
+
if (!el.hasAttribute("role")) {
|
|
562
|
+
this.renderer.setAttribute(el, "role", "button");
|
|
563
|
+
}
|
|
564
|
+
if (!el.hasAttribute("tabindex")) {
|
|
565
|
+
this.renderer.setAttribute(el, "tabindex", "0");
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
this.triggerElement.set(el);
|
|
554
569
|
}
|
|
555
570
|
focus() {
|
|
556
571
|
this.triggerElement()?.focus();
|
|
@@ -566,6 +581,20 @@ class DropdownTriggerDirective {
|
|
|
566
581
|
onKeydown(event) {
|
|
567
582
|
const key = event.key;
|
|
568
583
|
switch (key) {
|
|
584
|
+
case "Enter":
|
|
585
|
+
if (!this.handlesKey(event, key))
|
|
586
|
+
break;
|
|
587
|
+
// Also keeps Enter on a checkbox from submitting its form.
|
|
588
|
+
event.preventDefault();
|
|
589
|
+
this.dropdown.toggleDropdown();
|
|
590
|
+
break;
|
|
591
|
+
case " ":
|
|
592
|
+
if (!this.handlesKey(event, key))
|
|
593
|
+
break;
|
|
594
|
+
// Match button timing and prevent page scrolling.
|
|
595
|
+
event.preventDefault();
|
|
596
|
+
this.spacePressed = true;
|
|
597
|
+
break;
|
|
569
598
|
case "ArrowDown":
|
|
570
599
|
if (!this.isWidgetContent())
|
|
571
600
|
break;
|
|
@@ -585,17 +614,43 @@ class DropdownTriggerDirective {
|
|
|
585
614
|
break;
|
|
586
615
|
}
|
|
587
616
|
}
|
|
617
|
+
onKeyup(event) {
|
|
618
|
+
if (event.key !== " " || !this.spacePressed)
|
|
619
|
+
return;
|
|
620
|
+
this.spacePressed = false;
|
|
621
|
+
if (event.target !== this.focusableElement)
|
|
622
|
+
return;
|
|
623
|
+
this.dropdown.toggleDropdown();
|
|
624
|
+
}
|
|
625
|
+
onFocusout(event) {
|
|
626
|
+
if (event.target === this.focusableElement)
|
|
627
|
+
this.spacePressed = false;
|
|
628
|
+
}
|
|
629
|
+
/**
|
|
630
|
+
* Whether the directive must activate the trigger on `key` itself, because the
|
|
631
|
+
* element does not turn that key into a native click: both keys for a generic
|
|
632
|
+
* trigger, Enter for a checkbox or radio. Other native controls handle both.
|
|
633
|
+
*/
|
|
634
|
+
handlesKey(event, key) {
|
|
635
|
+
const el = this.focusableElement;
|
|
636
|
+
// Keys from other controls inside the host are theirs.
|
|
637
|
+
if (event.target !== el)
|
|
638
|
+
return false;
|
|
639
|
+
if (!this.isNativelyInteractive(el))
|
|
640
|
+
return true;
|
|
641
|
+
return key === "Enter" && el.matches(SPACE_ACTIVATED_SELECTOR);
|
|
642
|
+
}
|
|
588
643
|
isWidgetContent() {
|
|
589
644
|
return this.dropdown.dropdownContent().isWidget();
|
|
590
645
|
}
|
|
591
646
|
resolveTriggerElement() {
|
|
592
647
|
const el = this.host.nativeElement;
|
|
593
|
-
if (this.
|
|
648
|
+
if (this.isNativelyInteractive(el))
|
|
594
649
|
return el;
|
|
595
650
|
return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
|
|
596
651
|
}
|
|
597
|
-
|
|
598
|
-
return
|
|
652
|
+
isNativelyInteractive(el) {
|
|
653
|
+
return el.matches(NATIVE_INTERACTIVE_SELECTOR);
|
|
599
654
|
}
|
|
600
655
|
openAndFocusFirst() {
|
|
601
656
|
if (this.dropdown.isOpen()) {
|
|
@@ -614,7 +669,7 @@ class DropdownTriggerDirective {
|
|
|
614
669
|
}
|
|
615
670
|
}
|
|
616
671
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
617
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
|
|
672
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)", "focusout": "onFocusout($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
|
|
618
673
|
}
|
|
619
674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
|
|
620
675
|
type: Directive,
|
|
@@ -629,6 +684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
629
684
|
}], onKeydown: [{
|
|
630
685
|
type: HostListener,
|
|
631
686
|
args: ["keydown", ["$event"]]
|
|
687
|
+
}], onKeyup: [{
|
|
688
|
+
type: HostListener,
|
|
689
|
+
args: ["keyup", ["$event"]]
|
|
690
|
+
}], onFocusout: [{
|
|
691
|
+
type: HostListener,
|
|
692
|
+
args: ["focusout", ["$event"]]
|
|
632
693
|
}] } });
|
|
633
694
|
|
|
634
695
|
const DROPDOWN_API = new InjectionToken("DropdownApi");
|
|
@@ -3788,13 +3849,14 @@ class ClosingButtonComponent {
|
|
|
3788
3849
|
translationService = inject(TediTranslationService);
|
|
3789
3850
|
_defaultLabel = this.translationService.track("close");
|
|
3790
3851
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3791
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "showTitle() ? ariaLabel() || _defaultLabel() : null", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" } }, ngImport: i0, template: "<tedi-icon [name]=\"icon()\" [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 });
|
|
3852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "showTitle() ? ariaLabel() || _defaultLabel() : null", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" }, classAttribute: "no-print" }, ngImport: i0, template: "<tedi-icon [name]=\"icon()\" [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 });
|
|
3792
3853
|
}
|
|
3793
3854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, decorators: [{
|
|
3794
3855
|
type: Component,
|
|
3795
3856
|
args: [{ selector: "button[tedi-closing-button]", imports: [IconComponent], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3796
3857
|
"[attr.title]": "showTitle() ? ariaLabel() || _defaultLabel() : null",
|
|
3797
3858
|
"[attr.aria-label]": "ariaLabel() || _defaultLabel()",
|
|
3859
|
+
class: "no-print",
|
|
3798
3860
|
"[class.tedi-closing-button]": "true",
|
|
3799
3861
|
"[class.tedi-closing-button--small]": "size() === 'small'",
|
|
3800
3862
|
}, template: "<tedi-icon [name]=\"icon()\" [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"] }]
|
|
@@ -4443,13 +4505,13 @@ class InfoButtonComponent {
|
|
|
4443
4505
|
color = input("primary", ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
4444
4506
|
_defaultLabel = this.translationService.track("info-button.label");
|
|
4445
4507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4446
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\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 });
|
|
4508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button no-print" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\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 });
|
|
4447
4509
|
}
|
|
4448
4510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, decorators: [{
|
|
4449
4511
|
type: Component,
|
|
4450
4512
|
args: [{ standalone: true, selector: "button[tedi-info-button]", imports: [IconComponent], template: `<tedi-icon name="info" [size]="18" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4451
4513
|
type: "button",
|
|
4452
|
-
class: "tedi-info-button",
|
|
4514
|
+
class: "tedi-info-button no-print",
|
|
4453
4515
|
"[class.tedi-info-button--inverted]": "color() === 'inverted'",
|
|
4454
4516
|
"[attr.aria-label]": "ariaLabel() || _defaultLabel()",
|
|
4455
4517
|
}, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"] }]
|
|
@@ -4534,7 +4596,7 @@ class CollapseButtonComponent {
|
|
|
4534
4596
|
return this.ariaLabel() ?? this.label();
|
|
4535
4597
|
}, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
|
|
4536
4598
|
hostClasses = computed(() => {
|
|
4537
|
-
const classes = ["tedi-collapse-button"];
|
|
4599
|
+
const classes = ["tedi-collapse-button", "no-print"];
|
|
4538
4600
|
if (this.open())
|
|
4539
4601
|
classes.push("tedi-collapse-button--open");
|
|
4540
4602
|
if (this.size() === "small")
|
|
@@ -5412,11 +5474,11 @@ class CollapseComponent {
|
|
|
5412
5474
|
}
|
|
5413
5475
|
}
|
|
5414
5476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5415
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"tedi-collapse\"\n [class.tedi-collapse--open]=\"isOpen() === true\"\n [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n <button\n tedi-collapse-button\n [open]=\"isOpen()\"\n [openText]=\"openText()\"\n [closeText]=\"closeText()\"\n [hideText]=\"hideCollapseText()\"\n [arrowType]=\"arrowType()\"\n [size]=\"size()\"\n [inverted]=\"inverted()\"\n [ariaControls]=\"collapseContentId\"\n (openChange)=\"isOpen.set($event)\"\n ></button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"], dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"tedi-collapse\"\n [class.tedi-collapse--open]=\"isOpen() === true\"\n [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n <button\n tedi-collapse-button\n [open]=\"isOpen()\"\n [openText]=\"openText()\"\n [closeText]=\"closeText()\"\n [hideText]=\"hideCollapseText()\"\n [arrowType]=\"arrowType()\"\n [size]=\"size()\"\n [inverted]=\"inverted()\"\n [ariaControls]=\"collapseContentId\"\n (openChange)=\"isOpen.set($event)\"\n ></button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"], dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5416
5478
|
}
|
|
5417
5479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
5418
5480
|
type: Component,
|
|
5419
|
-
args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tedi-collapse\"\n [class.tedi-collapse--open]=\"isOpen() === true\"\n [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n <button\n tedi-collapse-button\n [open]=\"isOpen()\"\n [openText]=\"openText()\"\n [closeText]=\"closeText()\"\n [hideText]=\"hideCollapseText()\"\n [arrowType]=\"arrowType()\"\n [size]=\"size()\"\n [inverted]=\"inverted()\"\n [ariaControls]=\"collapseContentId\"\n (openChange)=\"isOpen.set($event)\"\n ></button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
|
|
5481
|
+
args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tedi-collapse\"\n [class.tedi-collapse--open]=\"isOpen() === true\"\n [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n <button\n tedi-collapse-button\n [open]=\"isOpen()\"\n [openText]=\"openText()\"\n [closeText]=\"closeText()\"\n [hideText]=\"hideCollapseText()\"\n [arrowType]=\"arrowType()\"\n [size]=\"size()\"\n [inverted]=\"inverted()\"\n [ariaControls]=\"collapseContentId\"\n (openChange)=\"isOpen.set($event)\"\n ></button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"] }]
|
|
5420
5482
|
}], propDecorators: { openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], hideCollapseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCollapseText", required: false }] }], arrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }] } });
|
|
5421
5483
|
|
|
5422
5484
|
/**
|
|
@@ -5708,6 +5770,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
5708
5770
|
|
|
5709
5771
|
/** Ignore tiny calculation differences when deciding the carousel’s position. */
|
|
5710
5772
|
const EPSILON = 0.001;
|
|
5773
|
+
/** Drag speed, in slides per ms, that counts as a flick. */
|
|
5774
|
+
const FLICK_VELOCITY = 0.0015;
|
|
5775
|
+
/** A flick's speed is measured over this many ms before release. */
|
|
5776
|
+
const FLICK_WINDOW = 100;
|
|
5777
|
+
/** Drags shorter than this (px) never move the carousel, so taps and jitter stay put. */
|
|
5778
|
+
const MIN_SWIPE_DISTANCE = 10;
|
|
5779
|
+
/** A mouse holds still while clicking, so a shorter drag is already deliberate. */
|
|
5780
|
+
const MIN_MOUSE_SWIPE_DISTANCE = 4;
|
|
5711
5781
|
class CarouselContentComponent {
|
|
5712
5782
|
/** Slides per view (minimum 1, can be fractional, e.g. 1.25 for peeking) */
|
|
5713
5783
|
slidesPerView = input({ xs: 1 }, ...(ngDevMode ? [{ debugName: "slidesPerView", transform: (v) => breakpointInput(v) }] : [{ transform: (v) => breakpointInput(v) }]));
|
|
@@ -5717,6 +5787,15 @@ class CarouselContentComponent {
|
|
|
5717
5787
|
fade = input(false, ...(ngDevMode ? [{ debugName: "fade" }] : []));
|
|
5718
5788
|
/** Transition duration in ms */
|
|
5719
5789
|
transitionMs = input(400, ...(ngDevMode ? [{ debugName: "transitionMs" }] : []));
|
|
5790
|
+
/**
|
|
5791
|
+
* How far a drag must go to move on, as a fraction (0–1) of the distance to the next
|
|
5792
|
+
* position, which is one slide except for a shorter final step when not looping.
|
|
5793
|
+
* Each position fully dragged past counts; a quick flick moves one position.
|
|
5794
|
+
* @default 0.3
|
|
5795
|
+
*/
|
|
5796
|
+
swipeThreshold = input(0.3, ...(ngDevMode ? [{ debugName: "swipeThreshold", transform: (value) => Math.min(Math.max(numberAttribute(value, 0.3), 0), 1) }] : [{
|
|
5797
|
+
transform: (value) => Math.min(Math.max(numberAttribute(value, 0.3), 0), 1),
|
|
5798
|
+
}]));
|
|
5720
5799
|
/**
|
|
5721
5800
|
* Whether navigation wraps around at the ends. When `false`, it stops at the
|
|
5722
5801
|
* first and last reachable positions and disables the corresponding arrow.
|
|
@@ -5901,6 +5980,12 @@ class CarouselContentComponent {
|
|
|
5901
5980
|
pendingFocus = false;
|
|
5902
5981
|
startX = 0;
|
|
5903
5982
|
startIndex = 0;
|
|
5983
|
+
lastX = 0;
|
|
5984
|
+
lastTime = 0;
|
|
5985
|
+
/** Recent pointer positions, for measuring flick speed at release. */
|
|
5986
|
+
samples = [];
|
|
5987
|
+
/** The current drag's minimum swipe distance (px), set by its pointer type. */
|
|
5988
|
+
minSwipeDistance = MIN_SWIPE_DISTANCE;
|
|
5904
5989
|
ro;
|
|
5905
5990
|
wheelTimeout;
|
|
5906
5991
|
scrollDelta = 0;
|
|
@@ -5995,6 +6080,13 @@ class CarouselContentComponent {
|
|
|
5995
6080
|
this.animate.set(false);
|
|
5996
6081
|
this.startX = ev.clientX;
|
|
5997
6082
|
this.startIndex = this.trackIndex();
|
|
6083
|
+
this.lastX = ev.clientX;
|
|
6084
|
+
this.lastTime = ev.timeStamp;
|
|
6085
|
+
this.samples = [{ x: ev.clientX, t: ev.timeStamp }];
|
|
6086
|
+
this.minSwipeDistance =
|
|
6087
|
+
ev.pointerType === "mouse"
|
|
6088
|
+
? MIN_MOUSE_SWIPE_DISTANCE
|
|
6089
|
+
: MIN_SWIPE_DISTANCE;
|
|
5998
6090
|
if (this.loop()) {
|
|
5999
6091
|
this.windowBase.set(Math.floor(this.startIndex));
|
|
6000
6092
|
}
|
|
@@ -6004,6 +6096,12 @@ class CarouselContentComponent {
|
|
|
6004
6096
|
return;
|
|
6005
6097
|
}
|
|
6006
6098
|
const dx = ev.clientX - this.startX;
|
|
6099
|
+
this.lastX = ev.clientX;
|
|
6100
|
+
this.lastTime = ev.timeStamp;
|
|
6101
|
+
this.samples.push({ x: ev.clientX, t: ev.timeStamp });
|
|
6102
|
+
while (this.samples[0].t < ev.timeStamp - FLICK_WINDOW) {
|
|
6103
|
+
this.samples.shift();
|
|
6104
|
+
}
|
|
6007
6105
|
const cellWidth = (this.viewportWidth() -
|
|
6008
6106
|
this.currentGap() * (this.currentSlidesPerView() - 1)) /
|
|
6009
6107
|
this.currentSlidesPerView() +
|
|
@@ -6017,13 +6115,104 @@ class CarouselContentComponent {
|
|
|
6017
6115
|
const clamped = Math.min(Math.max(targetIndex, min), max);
|
|
6018
6116
|
this.trackIndex.set(clamped);
|
|
6019
6117
|
}
|
|
6020
|
-
|
|
6118
|
+
/**
|
|
6119
|
+
* The browser ended the drag, e.g. to scroll the page, or capture was lost mid-drag:
|
|
6120
|
+
* not a swipe, so return to where it started. After a normal release this is a no-op,
|
|
6121
|
+
* as `lostpointercapture` follows `pointerup`.
|
|
6122
|
+
*/
|
|
6123
|
+
onPointerCancel() {
|
|
6021
6124
|
if (!this.dragging) {
|
|
6022
6125
|
return;
|
|
6023
6126
|
}
|
|
6024
6127
|
this.dragging = false;
|
|
6025
6128
|
this.animate.set(true);
|
|
6026
|
-
this.trackIndex.set(this.snap(this.
|
|
6129
|
+
this.trackIndex.set(this.snap(this.startIndex));
|
|
6130
|
+
}
|
|
6131
|
+
onPointerUp(ev) {
|
|
6132
|
+
if (!this.dragging) {
|
|
6133
|
+
return;
|
|
6134
|
+
}
|
|
6135
|
+
// The pointer can move after the last pointermove; the release reports where it ended.
|
|
6136
|
+
if (typeof ev?.clientX === "number") {
|
|
6137
|
+
this.onPointerMove(ev);
|
|
6138
|
+
}
|
|
6139
|
+
this.dragging = false;
|
|
6140
|
+
this.animate.set(true);
|
|
6141
|
+
this.trackIndex.set(this.swipeTarget(ev?.timeStamp ?? this.lastTime));
|
|
6142
|
+
}
|
|
6143
|
+
/**
|
|
6144
|
+
* Where a released drag settles. Walks stop position to stop position in the drag
|
|
6145
|
+
* direction: each gap fully dragged moves on, and a partly dragged gap moves on once it
|
|
6146
|
+
* reaches `swipeThreshold` of that gap (a bounded track's final gap can be short).
|
|
6147
|
+
* A flick that did not move on otherwise moves one position.
|
|
6148
|
+
*/
|
|
6149
|
+
swipeTarget(releasedAt) {
|
|
6150
|
+
const dx = this.lastX - this.startX;
|
|
6151
|
+
if (Math.abs(dx) < this.minSwipeDistance) {
|
|
6152
|
+
return this.snap(this.startIndex);
|
|
6153
|
+
}
|
|
6154
|
+
// Take the direction from the pointer: at a bound the clamped track does not move.
|
|
6155
|
+
const forward = dx < 0;
|
|
6156
|
+
let remaining = Math.abs(this.trackIndex() - this.startIndex);
|
|
6157
|
+
let position = this.startIndex;
|
|
6158
|
+
let moved = false;
|
|
6159
|
+
for (;;) {
|
|
6160
|
+
const next = this.adjacentStop(position, forward);
|
|
6161
|
+
const gap = Math.abs(next - position);
|
|
6162
|
+
if (gap < EPSILON) {
|
|
6163
|
+
break;
|
|
6164
|
+
}
|
|
6165
|
+
if (remaining >= gap - EPSILON) {
|
|
6166
|
+
position = next;
|
|
6167
|
+
remaining -= gap;
|
|
6168
|
+
moved = true;
|
|
6169
|
+
continue;
|
|
6170
|
+
}
|
|
6171
|
+
if (remaining > EPSILON &&
|
|
6172
|
+
remaining >= gap * this.swipeThreshold() - EPSILON) {
|
|
6173
|
+
position = next;
|
|
6174
|
+
moved = true;
|
|
6175
|
+
}
|
|
6176
|
+
break;
|
|
6177
|
+
}
|
|
6178
|
+
if (!moved && this.isFlick(releasedAt)) {
|
|
6179
|
+
return this.adjacentStop(this.startIndex, forward);
|
|
6180
|
+
}
|
|
6181
|
+
return moved ? position : this.snap(this.startIndex);
|
|
6182
|
+
}
|
|
6183
|
+
/** The next stop position after `position` in the given direction (itself at a bound). */
|
|
6184
|
+
adjacentStop(position, forward) {
|
|
6185
|
+
return forward
|
|
6186
|
+
? this.clampIndex(Math.floor(position + EPSILON) + 1)
|
|
6187
|
+
: this.clampIndex(Math.ceil(position - EPSILON) - 1);
|
|
6188
|
+
}
|
|
6189
|
+
/**
|
|
6190
|
+
* Whether the drag ended in a flick: at least `minSwipeDistance` of movement in the
|
|
6191
|
+
* drag direction within the last `FLICK_WINDOW` ms before release, fast enough. Measuring
|
|
6192
|
+
* up to the release lets a pause before the swipe pass and a hold after it slow it down.
|
|
6193
|
+
*/
|
|
6194
|
+
isFlick(releasedAt) {
|
|
6195
|
+
// Unmeasured, the gap alone would give a tiny cell width and make any drag a flick.
|
|
6196
|
+
if (!this.viewportWidth()) {
|
|
6197
|
+
return false;
|
|
6198
|
+
}
|
|
6199
|
+
const recent = this.samples.find((sample) => sample.t >= releasedAt - FLICK_WINDOW);
|
|
6200
|
+
if (!recent) {
|
|
6201
|
+
return false;
|
|
6202
|
+
}
|
|
6203
|
+
const distance = this.lastX - recent.x;
|
|
6204
|
+
const elapsed = releasedAt - recent.t;
|
|
6205
|
+
const sameDirection = Math.sign(distance) === Math.sign(this.lastX - this.startX);
|
|
6206
|
+
if (elapsed <= 0 ||
|
|
6207
|
+
!sameDirection ||
|
|
6208
|
+
Math.abs(distance) < this.minSwipeDistance) {
|
|
6209
|
+
return false;
|
|
6210
|
+
}
|
|
6211
|
+
const cellWidth = (this.viewportWidth() -
|
|
6212
|
+
this.currentGap() * (this.currentSlidesPerView() - 1)) /
|
|
6213
|
+
this.currentSlidesPerView() +
|
|
6214
|
+
this.currentGap();
|
|
6215
|
+
return Math.abs(distance) / cellWidth / elapsed > FLICK_VELOCITY;
|
|
6027
6216
|
}
|
|
6028
6217
|
ngAfterViewInit() {
|
|
6029
6218
|
const viewport = this.host.nativeElement;
|
|
@@ -6151,7 +6340,7 @@ class CarouselContentComponent {
|
|
|
6151
6340
|
}, 100);
|
|
6152
6341
|
}
|
|
6153
6342
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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 }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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)", "
|
|
6343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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 }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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)", "pointercancel": "onPointerCancel()", "lostpointercapture": "onPointerCancel()", "pointerup": "onPointerUp($event)" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6155
6344
|
}
|
|
6156
6345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, decorators: [{
|
|
6157
6346
|
type: Component,
|
|
@@ -6163,7 +6352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
6163
6352
|
"aria-live": "off",
|
|
6164
6353
|
"[class]": "classes()",
|
|
6165
6354
|
}, 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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"] }]
|
|
6166
|
-
}], ctorParameters: () => [], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
|
|
6355
|
+
}], ctorParameters: () => [], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
|
|
6167
6356
|
type: HostListener,
|
|
6168
6357
|
args: ["scroll"]
|
|
6169
6358
|
}], onWheel: [{
|
|
@@ -6178,15 +6367,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
6178
6367
|
}], onPointerMove: [{
|
|
6179
6368
|
type: HostListener,
|
|
6180
6369
|
args: ["pointermove", ["$event"]]
|
|
6181
|
-
}],
|
|
6182
|
-
type: HostListener,
|
|
6183
|
-
args: ["pointerup"]
|
|
6184
|
-
}, {
|
|
6370
|
+
}], onPointerCancel: [{
|
|
6185
6371
|
type: HostListener,
|
|
6186
6372
|
args: ["pointercancel"]
|
|
6187
6373
|
}, {
|
|
6188
6374
|
type: HostListener,
|
|
6189
6375
|
args: ["lostpointercapture"]
|
|
6376
|
+
}], onPointerUp: [{
|
|
6377
|
+
type: HostListener,
|
|
6378
|
+
args: ["pointerup", ["$event"]]
|
|
6190
6379
|
}] } });
|
|
6191
6380
|
|
|
6192
6381
|
class CarouselComponent {
|
|
@@ -8892,9 +9081,9 @@ class SelectComponent {
|
|
|
8892
9081
|
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8893
9082
|
/**
|
|
8894
9083
|
* Whether to show a clear button when a value is selected.
|
|
8895
|
-
* @default
|
|
9084
|
+
* @default true
|
|
8896
9085
|
*/
|
|
8897
|
-
clearable = input(
|
|
9086
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
8898
9087
|
/**
|
|
8899
9088
|
* Show the clear button only while the filled select is hovered or focused.
|
|
8900
9089
|
* Requires `clearable`.
|
|
@@ -8937,6 +9126,10 @@ class SelectComponent {
|
|
|
8937
9126
|
* Selected value, for use without a form directive. An array in multi-select
|
|
8938
9127
|
* mode, the bare value otherwise. Unlike `[ngModel]` it applies on the first
|
|
8939
9128
|
* render rather than a frame later. Do not combine with a form directive.
|
|
9129
|
+
*
|
|
9130
|
+
* `null`, `undefined` and `''` all mean nothing is selected, so
|
|
9131
|
+
* `new FormControl('')` and `new FormControl(null)` both start the select empty,
|
|
9132
|
+
* showing its placeholder.
|
|
8940
9133
|
*/
|
|
8941
9134
|
value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
8942
9135
|
/**
|
|
@@ -9289,7 +9482,7 @@ class SelectComponent {
|
|
|
9289
9482
|
const options = this.searchTerm().trim()
|
|
9290
9483
|
? this.filteredOptions()
|
|
9291
9484
|
: this.normalizedOptions();
|
|
9292
|
-
const enabledOptions =
|
|
9485
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
9293
9486
|
if (enabledOptions.length === 0)
|
|
9294
9487
|
return false;
|
|
9295
9488
|
if (this.usesDefaultCompare()) {
|
|
@@ -9304,7 +9497,7 @@ class SelectComponent {
|
|
|
9304
9497
|
const options = this.searchTerm().trim()
|
|
9305
9498
|
? this.filteredOptions()
|
|
9306
9499
|
: this.normalizedOptions();
|
|
9307
|
-
const enabledOptions =
|
|
9500
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
9308
9501
|
if (enabledOptions.length === 0)
|
|
9309
9502
|
return false;
|
|
9310
9503
|
let selectedCount;
|
|
@@ -9754,9 +9947,9 @@ class SelectComponent {
|
|
|
9754
9947
|
const compareWith = this.compareWith();
|
|
9755
9948
|
const selected = this.selectedValues();
|
|
9756
9949
|
const isSelected = selected.some((v) => compareWith(v, value));
|
|
9757
|
-
const newSelection = isSelected
|
|
9950
|
+
const newSelection = this.toSelection(isSelected
|
|
9758
9951
|
? selected.filter((v) => !compareWith(v, value))
|
|
9759
|
-
: [...selected, value];
|
|
9952
|
+
: [...selected, value], true);
|
|
9760
9953
|
this.selectedValues.set(newSelection);
|
|
9761
9954
|
this.onChange(newSelection);
|
|
9762
9955
|
this.selectionChange.emit(newSelection);
|
|
@@ -9766,8 +9959,9 @@ class SelectComponent {
|
|
|
9766
9959
|
this.searchInputRef()?.nativeElement.focus();
|
|
9767
9960
|
this.onTouched();
|
|
9768
9961
|
}
|
|
9962
|
+
/** Selects `value` in single-select mode, notifies the form and closes the dropdown. */
|
|
9769
9963
|
selectSingleValue(value) {
|
|
9770
|
-
this.selectedValues.set(
|
|
9964
|
+
this.selectedValues.set(this.toSelection(value, false));
|
|
9771
9965
|
this.onChange(value);
|
|
9772
9966
|
this.selectionChange.emit(value);
|
|
9773
9967
|
if (this.clearSearchOnSelect())
|
|
@@ -9853,6 +10047,10 @@ class SelectComponent {
|
|
|
9853
10047
|
this.scrollListener = undefined;
|
|
9854
10048
|
}
|
|
9855
10049
|
}
|
|
10050
|
+
/**
|
|
10051
|
+
* Handles a selection change from the listbox: the select-all and group rows, or
|
|
10052
|
+
* the new selection, which is emitted and written to the form.
|
|
10053
|
+
*/
|
|
9856
10054
|
handleValueChange(event) {
|
|
9857
10055
|
const values = event.value;
|
|
9858
10056
|
const selectAllIndex = values.findIndex((v) => v === SpecialOptionControls.SELECT_ALL);
|
|
@@ -9880,6 +10078,7 @@ class SelectComponent {
|
|
|
9880
10078
|
else {
|
|
9881
10079
|
newSelection = [...values];
|
|
9882
10080
|
}
|
|
10081
|
+
newSelection = this.toSelection(newSelection, true);
|
|
9883
10082
|
this.selectedValues.set(newSelection);
|
|
9884
10083
|
this.onChange(newSelection);
|
|
9885
10084
|
this.selectionChange.emit(newSelection);
|
|
@@ -9892,7 +10091,7 @@ class SelectComponent {
|
|
|
9892
10091
|
}
|
|
9893
10092
|
else {
|
|
9894
10093
|
const selected = values[0] ?? null;
|
|
9895
|
-
this.selectedValues.set(selected
|
|
10094
|
+
this.selectedValues.set(this.toSelection(selected, false));
|
|
9896
10095
|
this.onChange(selected);
|
|
9897
10096
|
this.selectionChange.emit(selected);
|
|
9898
10097
|
if (this.clearSearchOnSelect()) {
|
|
@@ -9986,7 +10185,7 @@ class SelectComponent {
|
|
|
9986
10185
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
9987
10186
|
if (!group)
|
|
9988
10187
|
return false;
|
|
9989
|
-
const enabledGroupOptions = group.options
|
|
10188
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
9990
10189
|
if (enabledGroupOptions.length === 0)
|
|
9991
10190
|
return false;
|
|
9992
10191
|
const compareWith = this.compareWith();
|
|
@@ -9997,7 +10196,7 @@ class SelectComponent {
|
|
|
9997
10196
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
9998
10197
|
if (!group)
|
|
9999
10198
|
return false;
|
|
10000
|
-
const enabledGroupOptions = group.options
|
|
10199
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
10001
10200
|
if (enabledGroupOptions.length === 0)
|
|
10002
10201
|
return false;
|
|
10003
10202
|
const compareWith = this.compareWith();
|
|
@@ -10066,7 +10265,7 @@ class SelectComponent {
|
|
|
10066
10265
|
const options = isSearching
|
|
10067
10266
|
? this.filteredOptions()
|
|
10068
10267
|
: this.normalizedOptions();
|
|
10069
|
-
const enabledOptions =
|
|
10268
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
10070
10269
|
const deselecting = this.allOptionsSelected();
|
|
10071
10270
|
let newSelection;
|
|
10072
10271
|
if (this.usesDefaultCompare()) {
|
|
@@ -10110,7 +10309,7 @@ class SelectComponent {
|
|
|
10110
10309
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
10111
10310
|
if (!group)
|
|
10112
10311
|
return;
|
|
10113
|
-
const enabledGroupOptions = group.options
|
|
10312
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
10114
10313
|
const groupValues = enabledGroupOptions.map((o) => o.value);
|
|
10115
10314
|
const isGroupSelected = this.isGroupSelected(groupLabel);
|
|
10116
10315
|
const compareWith = this.compareWith();
|
|
@@ -10132,11 +10331,20 @@ class SelectComponent {
|
|
|
10132
10331
|
}
|
|
10133
10332
|
onChange = () => { };
|
|
10134
10333
|
onTouched = () => { };
|
|
10334
|
+
/** Options that can take part in select-all and group selection: enabled, not `''`. */
|
|
10335
|
+
bulkSelectable(options) {
|
|
10336
|
+
return options.filter((o) => !o.disabled && o.value !== "");
|
|
10337
|
+
}
|
|
10338
|
+
/**
|
|
10339
|
+
* `null`, `undefined` and `''` all mean nothing is selected, since `''` is a common
|
|
10340
|
+
* form default for "no value" (`new FormControl('')`). Picking an option whose
|
|
10341
|
+
* value is `''` therefore leaves nothing selected too.
|
|
10342
|
+
*/
|
|
10135
10343
|
toSelection(value, allowMultiple) {
|
|
10136
10344
|
if (allowMultiple) {
|
|
10137
|
-
return Array.isArray(value) ? value : [];
|
|
10345
|
+
return Array.isArray(value) ? value.filter((v) => v !== "") : [];
|
|
10138
10346
|
}
|
|
10139
|
-
return value != null ? [value] : [];
|
|
10347
|
+
return value != null && value !== "" ? [value] : [];
|
|
10140
10348
|
}
|
|
10141
10349
|
writeValue(value) {
|
|
10142
10350
|
this.selectedValues.set(this.toSelection(value, this.allowMultiple()));
|
|
@@ -10712,7 +10920,7 @@ class ModalComponent {
|
|
|
10712
10920
|
useFactory: (modal, parentSize) => (modal.serviceMode && parentSize ? parentSize : modal.size),
|
|
10713
10921
|
deps: [ModalComponent, [new Optional(), new SkipSelf(), MODAL_SIZE]],
|
|
10714
10922
|
},
|
|
10715
|
-
], ngImport: i0, template: "@if (!serviceMode && open()) {\n <div class=\"tedi-modal__backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n<div\n [class.tedi-modal__dialog]=\"!serviceMode\"\n [attr.role]=\"serviceMode ? null : 'dialog'\"\n [attr.aria-modal]=\"serviceMode ? null : true\"\n [attr.aria-label]=\"dialogAriaLabel()\"\n [attr.aria-labelledby]=\"dialogAriaLabelledBy()\"\n [attr.tabindex]=\"serviceMode ? null : -1\"\n [cdkTrapFocus]=\"!serviceMode\"\n [cdkTrapFocusAutoCapture]=\"!serviceMode && open()\"\n [style.display]=\"serviceMode ? 'contents' : !open() ? 'none' : null\"\n [style.width]=\"customWidth()\"\n>\n <ng-content select=\"tedi-modal-header\" />\n <ng-content select=\"tedi-modal-content\" />\n <ng-content select=\"tedi-modal-footer\" />\n</div>\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10923
|
+
], ngImport: i0, template: "@if (!serviceMode && open()) {\n <div class=\"tedi-modal__backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n<div\n [class.tedi-modal__dialog]=\"!serviceMode\"\n [attr.role]=\"serviceMode ? null : 'dialog'\"\n [attr.aria-modal]=\"serviceMode ? null : true\"\n [attr.aria-label]=\"dialogAriaLabel()\"\n [attr.aria-labelledby]=\"dialogAriaLabelledBy()\"\n [attr.tabindex]=\"serviceMode ? null : -1\"\n [cdkTrapFocus]=\"!serviceMode\"\n [cdkTrapFocusAutoCapture]=\"!serviceMode && open()\"\n [style.display]=\"serviceMode ? 'contents' : !open() ? 'none' : null\"\n [style.width]=\"customWidth()\"\n>\n <ng-content select=\"tedi-modal-header\" />\n <ng-content select=\"tedi-modal-content\" />\n <ng-content select=\"tedi-modal-footer\" />\n</div>\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10716
10924
|
}
|
|
10717
10925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, decorators: [{
|
|
10718
10926
|
type: Component,
|
|
@@ -10727,7 +10935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10727
10935
|
useFactory: (modal, parentSize) => (modal.serviceMode && parentSize ? parentSize : modal.size),
|
|
10728
10936
|
deps: [ModalComponent, [new Optional(), new SkipSelf(), MODAL_SIZE]],
|
|
10729
10937
|
},
|
|
10730
|
-
], template: "@if (!serviceMode && open()) {\n <div class=\"tedi-modal__backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n<div\n [class.tedi-modal__dialog]=\"!serviceMode\"\n [attr.role]=\"serviceMode ? null : 'dialog'\"\n [attr.aria-modal]=\"serviceMode ? null : true\"\n [attr.aria-label]=\"dialogAriaLabel()\"\n [attr.aria-labelledby]=\"dialogAriaLabelledBy()\"\n [attr.tabindex]=\"serviceMode ? null : -1\"\n [cdkTrapFocus]=\"!serviceMode\"\n [cdkTrapFocusAutoCapture]=\"!serviceMode && open()\"\n [style.display]=\"serviceMode ? 'contents' : !open() ? 'none' : null\"\n [style.width]=\"customWidth()\"\n>\n <ng-content select=\"tedi-modal-header\" />\n <ng-content select=\"tedi-modal-content\" />\n <ng-content select=\"tedi-modal-footer\" />\n</div>\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10938
|
+
], template: "@if (!serviceMode && open()) {\n <div class=\"tedi-modal__backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n<div\n [class.tedi-modal__dialog]=\"!serviceMode\"\n [attr.role]=\"serviceMode ? null : 'dialog'\"\n [attr.aria-modal]=\"serviceMode ? null : true\"\n [attr.aria-label]=\"dialogAriaLabel()\"\n [attr.aria-labelledby]=\"dialogAriaLabelledBy()\"\n [attr.tabindex]=\"serviceMode ? null : -1\"\n [cdkTrapFocus]=\"!serviceMode\"\n [cdkTrapFocusAutoCapture]=\"!serviceMode && open()\"\n [style.display]=\"serviceMode ? 'contents' : !open() ? 'none' : null\"\n [style.width]=\"customWidth()\"\n>\n <ng-content select=\"tedi-modal-header\" />\n <ng-content select=\"tedi-modal-content\" />\n <ng-content select=\"tedi-modal-footer\" />\n</div>\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10731
10939
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }] } });
|
|
10732
10940
|
|
|
10733
10941
|
class ModalHeaderComponent {
|
|
@@ -10764,24 +10972,24 @@ class ModalHeaderComponent {
|
|
|
10764
10972
|
}
|
|
10765
10973
|
}
|
|
10766
10974
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10767
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeButtonSize: { classPropertyName: "closeButtonSize", publicName: "closeButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-modal-header" }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-modal-header__close\"\n [size]=\"effectiveCloseButtonSize()\"\n (click)=\"closeModal()\"\n ></button>\n }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10975
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeButtonSize: { classPropertyName: "closeButtonSize", publicName: "closeButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-modal-header" }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-modal-header__close\"\n [size]=\"effectiveCloseButtonSize()\"\n (click)=\"closeModal()\"\n ></button>\n }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10768
10976
|
}
|
|
10769
10977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
10770
10978
|
type: Component,
|
|
10771
10979
|
args: [{ standalone: true, selector: "tedi-modal-header", imports: [ClosingButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10772
10980
|
class: "tedi-modal-header",
|
|
10773
|
-
}, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-modal-header__close\"\n [size]=\"effectiveCloseButtonSize()\"\n (click)=\"closeModal()\"\n ></button>\n }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10981
|
+
}, template: "<div class=\"tedi-modal-header__head\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n @if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-modal-header__close\"\n [size]=\"effectiveCloseButtonSize()\"\n (click)=\"closeModal()\"\n ></button>\n }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10774
10982
|
}], propDecorators: { showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonSize", required: false }] }] } });
|
|
10775
10983
|
|
|
10776
10984
|
class ModalContentComponent {
|
|
10777
10985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ModalContentComponent, isStandalone: true, selector: "tedi-modal-content", host: { classAttribute: "tedi-modal-content" }, hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0, template: "<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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ModalContentComponent, isStandalone: true, selector: "tedi-modal-content", host: { classAttribute: "tedi-modal-content" }, hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0, template: "<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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10779
10987
|
}
|
|
10780
10988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalContentComponent, decorators: [{
|
|
10781
10989
|
type: Component,
|
|
10782
10990
|
args: [{ standalone: true, selector: "tedi-modal-content", imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], host: {
|
|
10783
10991
|
class: "tedi-modal-content",
|
|
10784
|
-
}, template: "<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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10992
|
+
}, template: "<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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
10785
10993
|
}] });
|
|
10786
10994
|
|
|
10787
10995
|
const ITEM_SIZE_PX = 48;
|
|
@@ -11230,14 +11438,14 @@ class PaginationComponent {
|
|
|
11230
11438
|
});
|
|
11231
11439
|
}
|
|
11232
11440
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-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(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\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: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-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(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\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: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11234
11442
|
}
|
|
11235
11443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
11236
11444
|
type: Component,
|
|
11237
11445
|
args: [{ selector: "tedi-pagination", standalone: true, imports: [ButtonComponent, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
11238
11446
|
"[class]": "hostClasses()",
|
|
11239
11447
|
"data-name": "tedi-pagination",
|
|
11240
|
-
}, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-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(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
11448
|
+
}, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-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(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
11241
11449
|
}], ctorParameters: () => [], propDecorators: { pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], dividerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerPosition", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], hideResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideResults", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], hideArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideArrows", required: false }] }], disableArrowsAtBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableArrowsAtBoundary", required: false }] }], arrowVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowVariant", required: false }] }], showArrowLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrowLabels", required: false }] }], previousIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousIcon", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], showModalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModalTitle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], customResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { isSignal: true }] }] } });
|
|
11242
11450
|
|
|
11243
11451
|
class TediTableHeaderButtonComponent {
|
|
@@ -11615,6 +11823,26 @@ class TextFieldComponent {
|
|
|
11615
11823
|
alias: "disabled",
|
|
11616
11824
|
transform: booleanAttribute,
|
|
11617
11825
|
}]));
|
|
11826
|
+
// Native `readonly`, under both the attribute (`readonly`) and the property
|
|
11827
|
+
// (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
|
|
11828
|
+
// button while the value cannot be edited.
|
|
11829
|
+
readOnlyAttribute = input(false, ...(ngDevMode ? [{ debugName: "readOnlyAttribute",
|
|
11830
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
11831
|
+
alias: "readonly",
|
|
11832
|
+
transform: booleanAttribute }] : [{
|
|
11833
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
11834
|
+
alias: "readonly",
|
|
11835
|
+
transform: booleanAttribute,
|
|
11836
|
+
}]));
|
|
11837
|
+
readOnlyProperty = input(false, ...(ngDevMode ? [{ debugName: "readOnlyProperty",
|
|
11838
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
11839
|
+
alias: "readOnly",
|
|
11840
|
+
transform: booleanAttribute }] : [{
|
|
11841
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
11842
|
+
alias: "readOnly",
|
|
11843
|
+
transform: booleanAttribute,
|
|
11844
|
+
}]));
|
|
11845
|
+
readOnly = computed(() => this.readOnlyAttribute() || this.readOnlyProperty(), ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
|
|
11618
11846
|
disabled = computed(() => this.disabledInput() ||
|
|
11619
11847
|
this.formDisabled() ||
|
|
11620
11848
|
(this.fieldContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
@@ -11683,7 +11911,7 @@ class TextFieldComponent {
|
|
|
11683
11911
|
this.onTouched();
|
|
11684
11912
|
}
|
|
11685
11913
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-text-field--small": "resolvedSize() === 'small'", "class.tedi-text-field--large": "resolvedSize() === 'large'", "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "disabled": "disabled()" }, classAttribute: "tedi-text-field" }, providers: [
|
|
11914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnlyAttribute: { classPropertyName: "readOnlyAttribute", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readOnlyProperty: { classPropertyName: "readOnlyProperty", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-text-field--small": "resolvedSize() === 'small'", "class.tedi-text-field--large": "resolvedSize() === 'large'", "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "disabled": "disabled()", "readOnly": "readOnly()" }, classAttribute: "tedi-text-field" }, providers: [
|
|
11687
11915
|
{
|
|
11688
11916
|
provide: NG_VALUE_ACCESSOR,
|
|
11689
11917
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
@@ -11717,10 +11945,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11717
11945
|
"[attr.aria-invalid]": "invalid() || null",
|
|
11718
11946
|
"[attr.aria-describedby]": "describedBy.attribute()",
|
|
11719
11947
|
"[disabled]": "disabled()",
|
|
11948
|
+
"[readOnly]": "readOnly()",
|
|
11720
11949
|
"(input)": "handleInputChange($event)",
|
|
11721
11950
|
"(blur)": "handleBlur()",
|
|
11722
11951
|
}, styles: [".tedi-text-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field:not(.tedi-field-surface){flex:1;min-width:0;height:100%;padding-inline-start:1px;margin-inline-start:-1px}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-text-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-visible{--_field-ring-color: var(--_field-border-color)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover{--_field-border-color: var(--form-input-border-hover)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active{--_field-border-color: var(--form-input-border-active)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-visible{--_field-border-color: var(--form-input-border-focus)}.tedi-text-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-text-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-text-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}\n"] }]
|
|
11723
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
11952
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnlyAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readOnlyProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
|
|
11724
11953
|
|
|
11725
11954
|
class SeparatorComponent {
|
|
11726
11955
|
/**
|
|
@@ -11835,10 +12064,12 @@ class FormFieldComponent {
|
|
|
11835
12064
|
*/
|
|
11836
12065
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
11837
12066
|
/**
|
|
11838
|
-
* Whether the field shows a clear button once the control holds a value.
|
|
11839
|
-
*
|
|
12067
|
+
* Whether the field shows a clear button once the control holds a value. The
|
|
12068
|
+
* single source of truth for every control inside it — date and time fields
|
|
12069
|
+
* read it too instead of declaring their own input. A textarea never gets one.
|
|
12070
|
+
* @default true
|
|
11840
12071
|
*/
|
|
11841
|
-
clearable = input(
|
|
12072
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
11842
12073
|
/**
|
|
11843
12074
|
* Show the clear button only while the filled field is hovered or focused.
|
|
11844
12075
|
* Requires `clearable`.
|
|
@@ -11873,7 +12104,19 @@ class FormFieldComponent {
|
|
|
11873
12104
|
* they need a row that carries the surface. Without them the control paints
|
|
11874
12105
|
* itself and no box is rendered at all.
|
|
11875
12106
|
*/
|
|
11876
|
-
hasBox = computed(() => !!this.icon() || this.
|
|
12107
|
+
hasBox = computed(() => !!this.icon() || this.renderClearButton(), ...(ngDevMode ? [{ debugName: "hasBox" }] : []));
|
|
12108
|
+
/**
|
|
12109
|
+
* Whether the field renders its own clear button. Controls that render one
|
|
12110
|
+
* themselves opt out, so `clearable` drives them without producing two, and
|
|
12111
|
+
* a control that cannot be reset, or never takes one, gets none.
|
|
12112
|
+
*/
|
|
12113
|
+
renderClearButton = computed(() => {
|
|
12114
|
+
const control = this.control();
|
|
12115
|
+
return (this.clearable() &&
|
|
12116
|
+
!control?.ownsClearButton &&
|
|
12117
|
+
control?.clearButton !== false &&
|
|
12118
|
+
!!control?.reset);
|
|
12119
|
+
}, ...(ngDevMode ? [{ debugName: "renderClearButton" }] : []));
|
|
11877
12120
|
ownsSurface = computed(() => this.hasBox(), ...(ngDevMode ? [{ debugName: "ownsSurface" }] : []));
|
|
11878
12121
|
disabled = computed(() => this.inputGroup?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
11879
12122
|
invalid = computed(() => this.feedback()?.type() === "error" ||
|
|
@@ -11931,7 +12174,9 @@ class FormFieldComponent {
|
|
|
11931
12174
|
return 24;
|
|
11932
12175
|
return 18;
|
|
11933
12176
|
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
11934
|
-
showClearButton = computed(() => this.
|
|
12177
|
+
showClearButton = computed(() => this.renderClearButton() &&
|
|
12178
|
+
!!this.control()?.value() &&
|
|
12179
|
+
!this.control()?.readOnly?.(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
|
|
11935
12180
|
clear() {
|
|
11936
12181
|
this.control()?.reset?.();
|
|
11937
12182
|
}
|
|
@@ -11966,7 +12211,7 @@ class FormFieldComponent {
|
|
|
11966
12211
|
provide: TEDI_FIELD_CONTEXT,
|
|
11967
12212
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
11968
12213
|
},
|
|
11969
|
-
], queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (
|
|
12214
|
+
], queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (renderClearButton()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11970
12215
|
}
|
|
11971
12216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
11972
12217
|
type: Component,
|
|
@@ -11984,7 +12229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11984
12229
|
},
|
|
11985
12230
|
], host: {
|
|
11986
12231
|
"[class]": "hostClasses()",
|
|
11987
|
-
}, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (
|
|
12232
|
+
}, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (renderClearButton()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"] }]
|
|
11988
12233
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showClearOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearOnInteraction", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], characterLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterLimit", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TEDI_FORM_FIELD_CONTROL), { ...{
|
|
11989
12234
|
descendants: true,
|
|
11990
12235
|
}, isSignal: true }] }], feedback: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FeedbackTextComponent), { ...{
|
|
@@ -11993,7 +12238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11993
12238
|
|
|
11994
12239
|
class PopoverTriggerDirective {
|
|
11995
12240
|
/**
|
|
11996
|
-
*
|
|
12241
|
+
* Underline the trigger element.
|
|
11997
12242
|
* @default false
|
|
11998
12243
|
*/
|
|
11999
12244
|
underline = input(false, ...(ngDevMode ? [{ debugName: "underline" }] : []));
|
|
@@ -12044,11 +12289,11 @@ class PopoverContentComponent {
|
|
|
12044
12289
|
*/
|
|
12045
12290
|
maxWidth = input("small", ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
|
|
12046
12291
|
/**
|
|
12047
|
-
*
|
|
12292
|
+
* Title shown at the top of the content.
|
|
12048
12293
|
*/
|
|
12049
12294
|
title = input("", ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
12050
12295
|
/**
|
|
12051
|
-
*
|
|
12296
|
+
* Show a close button in the content.
|
|
12052
12297
|
* @default false
|
|
12053
12298
|
*/
|
|
12054
12299
|
showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
@@ -12087,38 +12332,47 @@ class PopoverComponent {
|
|
|
12087
12332
|
*/
|
|
12088
12333
|
position = input("top", ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
12089
12334
|
/**
|
|
12090
|
-
*
|
|
12335
|
+
* Flip to the opposite side when the popover would overflow the screen.
|
|
12091
12336
|
* @default false
|
|
12092
12337
|
*/
|
|
12093
12338
|
preventOverflow = input(false, ...(ngDevMode ? [{ debugName: "preventOverflow" }] : []));
|
|
12094
12339
|
/**
|
|
12095
|
-
*
|
|
12340
|
+
* Close the popover when clicking outside its content.
|
|
12096
12341
|
* @default true
|
|
12097
12342
|
*/
|
|
12098
12343
|
dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
|
|
12099
12344
|
/**
|
|
12100
|
-
*
|
|
12345
|
+
* Close the popover when the page scrolls.
|
|
12101
12346
|
* @default false
|
|
12102
12347
|
*/
|
|
12103
12348
|
hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll" }] : []));
|
|
12104
12349
|
/**
|
|
12105
|
-
*
|
|
12350
|
+
* Show an illustrative border on the arrow side.
|
|
12106
12351
|
* @default false
|
|
12107
12352
|
*/
|
|
12108
12353
|
withBorder = input(false, ...(ngDevMode ? [{ debugName: "withBorder" }] : []));
|
|
12109
12354
|
/**
|
|
12110
|
-
*
|
|
12355
|
+
* Show the arrow pointing to the trigger.
|
|
12356
|
+
* @default true
|
|
12111
12357
|
*/
|
|
12112
12358
|
withArrow = input(true, ...(ngDevMode ? [{ debugName: "withArrow" }] : []));
|
|
12113
12359
|
/**
|
|
12114
|
-
* Lock scrolling on rest of the page
|
|
12360
|
+
* Lock scrolling on the rest of the page while the popover is open.
|
|
12115
12361
|
* @default false
|
|
12116
12362
|
*/
|
|
12117
12363
|
lockScroll = input(false, ...(ngDevMode ? [{ debugName: "lockScroll" }] : []));
|
|
12118
|
-
/**
|
|
12364
|
+
/**
|
|
12365
|
+
* Delay in ms before the popover closes when neither the trigger nor the
|
|
12366
|
+
* content is hovered.
|
|
12119
12367
|
* @default 100
|
|
12120
12368
|
*/
|
|
12121
12369
|
timeoutDelay = input(100, ...(ngDevMode ? [{ debugName: "timeoutDelay" }] : []));
|
|
12370
|
+
/**
|
|
12371
|
+
* Gap in px between the trigger and the popover. The arrow's gap is added on
|
|
12372
|
+
* top when `withArrow` is `true`.
|
|
12373
|
+
* @default 8
|
|
12374
|
+
*/
|
|
12375
|
+
offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
|
|
12122
12376
|
document = inject(DOCUMENT);
|
|
12123
12377
|
renderer = inject(Renderer2);
|
|
12124
12378
|
connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
|
|
@@ -12132,7 +12386,14 @@ class PopoverComponent {
|
|
|
12132
12386
|
arrowTop = signal(null, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
|
|
12133
12387
|
overlayOrigin = computed(() => this.popoverTrigger().overlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
|
|
12134
12388
|
arrowOffset = computed(() => (this.withArrow() ? 12 : 0), ...(ngDevMode ? [{ debugName: "arrowOffset" }] : []));
|
|
12135
|
-
overlayPositions = computed(() =>
|
|
12389
|
+
overlayPositions = computed(() => {
|
|
12390
|
+
const gap = this.offset() + this.arrowOffset();
|
|
12391
|
+
return toConnectedPositions(this.position(), this.preventOverflow()).map((pos) => ({
|
|
12392
|
+
...pos,
|
|
12393
|
+
offsetX: pos.offsetX ? Math.sign(pos.offsetX) * gap : pos.offsetX,
|
|
12394
|
+
offsetY: pos.offsetY ? Math.sign(pos.offsetY) * gap : pos.offsetY,
|
|
12395
|
+
}));
|
|
12396
|
+
}, ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
|
|
12136
12397
|
panelClasses = computed(() => {
|
|
12137
12398
|
const classList = ["tedi-popover__container"];
|
|
12138
12399
|
if (this.withBorder())
|
|
@@ -12360,24 +12621,29 @@ class PopoverComponent {
|
|
|
12360
12621
|
this.hidePopover(true);
|
|
12361
12622
|
}
|
|
12362
12623
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.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--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: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.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--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: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12364
12625
|
}
|
|
12365
12626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
12366
12627
|
type: Component,
|
|
12367
12628
|
args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12368
12629
|
class: "tedi-popover",
|
|
12369
12630
|
}, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.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--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"] }]
|
|
12370
|
-
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
|
|
12631
|
+
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
|
|
12371
12632
|
|
|
12633
|
+
/**
|
|
12634
|
+
* Right-aligns its content. Add `tedi-modal-footer-start` to each element that
|
|
12635
|
+
* should sit on the left instead. Mark the elements themselves, not a wrapper,
|
|
12636
|
+
* so they keep the footer's gap.
|
|
12637
|
+
*/
|
|
12372
12638
|
class ModalFooterComponent {
|
|
12373
12639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12374
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ModalFooterComponent, isStandalone: true, selector: "tedi-modal-footer", host: { classAttribute: "tedi-modal-footer" }, ngImport: i0, template: "<ng-content />", isInline: true, 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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ModalFooterComponent, isStandalone: true, selector: "tedi-modal-footer", host: { classAttribute: "tedi-modal-footer" }, ngImport: i0, template: "<ng-content />", isInline: true, 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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12375
12641
|
}
|
|
12376
12642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
12377
12643
|
type: Component,
|
|
12378
12644
|
args: [{ standalone: true, selector: "tedi-modal-footer", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12379
12645
|
class: "tedi-modal-footer",
|
|
12380
|
-
}, 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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
12646
|
+
}, 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{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;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-footer-gap: var(--button-gutter-x)}.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-footer-gap: var(--button-gutter-x-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:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-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(--tedi-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 .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--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-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--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-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--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-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-footer [tedi-modal-footer-start]:not(:has(~[tedi-modal-footer-start])){margin-inline-end:auto}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
12381
12647
|
}] });
|
|
12382
12648
|
|
|
12383
12649
|
/**
|
|
@@ -14609,7 +14875,7 @@ class TediTableComponent {
|
|
|
14609
14875
|
useFactory: (component) => component.contextValue,
|
|
14610
14876
|
deps: [TediTableComponent],
|
|
14611
14877
|
},
|
|
14612
|
-
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { 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: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14878
|
+
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { 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: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14613
14879
|
}
|
|
14614
14880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
14615
14881
|
type: Component,
|
|
@@ -14643,7 +14909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
14643
14909
|
useFactory: (component) => component.contextValue,
|
|
14644
14910
|
deps: [TediTableComponent],
|
|
14645
14911
|
},
|
|
14646
|
-
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
14912
|
+
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
|
|
14647
14913
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { isSignal: true }] }] } });
|
|
14648
14914
|
|
|
14649
14915
|
class TediTableToolbarComponent {
|
|
@@ -15474,7 +15740,7 @@ class FilterComponent {
|
|
|
15474
15740
|
useExisting: forwardRef(() => FilterComponent),
|
|
15475
15741
|
multi: true,
|
|
15476
15742
|
},
|
|
15477
|
-
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);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(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15743
|
+
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);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(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15478
15744
|
}
|
|
15479
15745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
|
|
15480
15746
|
type: Component,
|
|
@@ -15751,7 +16017,7 @@ class DateInputComponent {
|
|
|
15751
16017
|
return width - inputMinWidth;
|
|
15752
16018
|
}
|
|
15753
16019
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15754
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name() || null\"\n [type]=\"inputType()\"\n [value]=\"inputValue()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16020
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name() || null\"\n [type]=\"inputType()\"\n [value]=\"inputValue()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15755
16021
|
}
|
|
15756
16022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
15757
16023
|
type: Component,
|
|
@@ -15972,6 +16238,17 @@ class DateFieldComponent {
|
|
|
15972
16238
|
* set here.
|
|
15973
16239
|
*/
|
|
15974
16240
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
16241
|
+
/**
|
|
16242
|
+
* Whether the clear button shows once the field has a value. Falls back to the
|
|
16243
|
+
* wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
|
|
16244
|
+
* wrapper, and use this only for a standalone field.
|
|
16245
|
+
*/
|
|
16246
|
+
clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable",
|
|
16247
|
+
// Unset stays `undefined` so the wrapper's `clearable` still applies.
|
|
16248
|
+
transform: (v) => (v == null ? undefined : booleanAttribute(v)) }] : [{
|
|
16249
|
+
// Unset stays `undefined` so the wrapper's `clearable` still applies.
|
|
16250
|
+
transform: (v) => (v == null ? undefined : booleanAttribute(v)),
|
|
16251
|
+
}]));
|
|
15975
16252
|
/**
|
|
15976
16253
|
* Forces the error state on, or off, regardless of the reactive-forms state.
|
|
15977
16254
|
* Leave unset to let the control derive it.
|
|
@@ -16161,10 +16438,15 @@ class DateFieldComponent {
|
|
|
16161
16438
|
invalid: computed(() => this.invalid()),
|
|
16162
16439
|
valid: computed(() => this.valid()),
|
|
16163
16440
|
disabled: computed(() => this.disabled()),
|
|
16441
|
+
clearable: computed(() => this.clearableResolved()),
|
|
16164
16442
|
};
|
|
16165
16443
|
ngOnInit() {
|
|
16166
16444
|
this.derived.connect();
|
|
16167
16445
|
}
|
|
16446
|
+
/** The clear button sits in the date input's action row, beside the calendar. */
|
|
16447
|
+
ownsClearButton = true;
|
|
16448
|
+
/** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
|
|
16449
|
+
clearableResolved = computed(() => this.clearable() ?? this.fieldContext?.clearable() ?? true, ...(ngDevMode ? [{ debugName: "clearableResolved" }] : []));
|
|
16168
16450
|
resolvedDisabledMatchers = computed(() => {
|
|
16169
16451
|
const result = [];
|
|
16170
16452
|
const explicit = this.disabledMatchers();
|
|
@@ -16268,7 +16550,7 @@ class DateFieldComponent {
|
|
|
16268
16550
|
* so they must also be able to remove them (clear button, tag close).
|
|
16269
16551
|
*/
|
|
16270
16552
|
valueEditable = computed(() => !this.fieldDisabled() && (!this.readOnly() || this.showCalendar()), ...(ngDevMode ? [{ debugName: "valueEditable" }] : []));
|
|
16271
|
-
canClear = computed(() => !!this.value() && this.valueEditable(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
|
|
16553
|
+
canClear = computed(() => this.clearableResolved() && !!this.value() && this.valueEditable(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
|
|
16272
16554
|
inputIsTrigger = computed(() => this.showCalendar() && this.calendarTriggerResolved() === "input", ...(ngDevMode ? [{ debugName: "inputIsTrigger" }] : []));
|
|
16273
16555
|
initialOpenEmit = true;
|
|
16274
16556
|
constructor() {
|
|
@@ -16682,7 +16964,7 @@ class DateFieldComponent {
|
|
|
16682
16964
|
return host.querySelector(".tedi-date-input__input");
|
|
16683
16965
|
}
|
|
16684
16966
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16685
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
|
|
16967
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
|
|
16686
16968
|
{
|
|
16687
16969
|
provide: NG_VALUE_ACCESSOR,
|
|
16688
16970
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
@@ -16704,7 +16986,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16704
16986
|
args: [{ selector: "tedi-date-field", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
16705
16987
|
CalendarComponent,
|
|
16706
16988
|
DateInputComponent,
|
|
16707
|
-
ButtonComponent,
|
|
16708
16989
|
OverlayModule,
|
|
16709
16990
|
A11yModule,
|
|
16710
16991
|
TediTranslationPipe,
|
|
@@ -16732,7 +17013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16732
17013
|
"[class.tedi-date-field--small]": "resolvedSize() === 'small'",
|
|
16733
17014
|
"[class.tedi-date-field--large]": "resolvedSize() === 'large'",
|
|
16734
17015
|
}, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"inputText()\"\n [ariaDescribedby]=\"describedBy.attribute()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable() && valueEditable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
|
|
16735
|
-
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
17016
|
+
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
16736
17017
|
|
|
16737
17018
|
class DatePickerHeaderComponent {
|
|
16738
17019
|
/** Unique ID for ARIA controls */
|
|
@@ -17559,7 +17840,7 @@ class DatePickerComponent {
|
|
|
17559
17840
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
17560
17841
|
multi: true,
|
|
17561
17842
|
},
|
|
17562
|
-
], 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().isOpen()\"\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(--tedi-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:inset 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;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;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;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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 });
|
|
17843
|
+
], 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().isOpen()\"\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(--tedi-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:inset 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;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;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;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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 });
|
|
17563
17844
|
}
|
|
17564
17845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
17565
17846
|
type: Component,
|
|
@@ -17582,7 +17863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
17582
17863
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
17583
17864
|
multi: true,
|
|
17584
17865
|
},
|
|
17585
|
-
], 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().isOpen()\"\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(--tedi-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:inset 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;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;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;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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"] }]
|
|
17866
|
+
], 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().isOpen()\"\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(--tedi-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:inset 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;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;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;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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(--tedi-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(--tedi-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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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"] }]
|
|
17586
17867
|
}], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], monthMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthMode", required: false }] }], yearMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMode", required: false }] }], startYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "startYear", required: false }] }], endYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "endYear", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], inputState: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputState", required: false }] }], inputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSize", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], calendarGrid: [{ type: i0.ViewChild, args: ["gridElement", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
|
|
17587
17868
|
|
|
17588
17869
|
class NumberFieldComponent {
|
|
@@ -18397,7 +18678,7 @@ class SearchComponent {
|
|
|
18397
18678
|
useExisting: forwardRef(() => SearchComponent),
|
|
18398
18679
|
multi: true,
|
|
18399
18680
|
},
|
|
18400
|
-
], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div\n class=\"tedi-search__panel\"\n [class.tedi-search__panel--above]=\"panelAbove()\"\n >\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: 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"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18681
|
+
], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div\n class=\"tedi-search__panel\"\n [class.tedi-search__panel--above]=\"panelAbove()\"\n >\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: 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"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18401
18682
|
}
|
|
18402
18683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
|
|
18403
18684
|
type: Component,
|
|
@@ -19003,6 +19284,28 @@ class TextareaComponent {
|
|
|
19003
19284
|
limits.push(this.toCssSize(maxHeight));
|
|
19004
19285
|
return limits.length === 1 ? limits[0] : `min(${limits.join(", ")})`;
|
|
19005
19286
|
}, ...(ngDevMode ? [{ debugName: "maxHeightStyle" }] : []));
|
|
19287
|
+
// Native `readonly`, under both the attribute (`readonly`) and the property
|
|
19288
|
+
// (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
|
|
19289
|
+
// button while the value cannot be edited.
|
|
19290
|
+
readOnlyAttribute = input(false, ...(ngDevMode ? [{ debugName: "readOnlyAttribute",
|
|
19291
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
19292
|
+
alias: "readonly",
|
|
19293
|
+
transform: booleanAttribute }] : [{
|
|
19294
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
19295
|
+
alias: "readonly",
|
|
19296
|
+
transform: booleanAttribute,
|
|
19297
|
+
}]));
|
|
19298
|
+
readOnlyProperty = input(false, ...(ngDevMode ? [{ debugName: "readOnlyProperty",
|
|
19299
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
19300
|
+
alias: "readOnly",
|
|
19301
|
+
transform: booleanAttribute }] : [{
|
|
19302
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
19303
|
+
alias: "readOnly",
|
|
19304
|
+
transform: booleanAttribute,
|
|
19305
|
+
}]));
|
|
19306
|
+
readOnly = computed(() => this.readOnlyAttribute() || this.readOnlyProperty(), ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
|
|
19307
|
+
/** Textareas take no clear button, even inside a `clearable` form field. */
|
|
19308
|
+
clearButton = false;
|
|
19006
19309
|
disabled = computed(() => this.formDisabled() || (this.fieldContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
19007
19310
|
derived = deriveControlState();
|
|
19008
19311
|
describedBy = controlDescribedBy();
|
|
@@ -19066,7 +19369,7 @@ class TextareaComponent {
|
|
|
19066
19369
|
this.onTouched();
|
|
19067
19370
|
}
|
|
19068
19371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19069
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "textarea[tedi-textarea]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-textarea--small": "resolvedSize() === 'small'", "class.tedi-textarea--not-resizable": "!resizable()", "class.tedi-textarea--auto-grow": "autoGrow()", "style.height": "heightStyle()", "style.min-height": "minHeightStyle()", "style.max-height": "maxHeightStyle()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()" }, classAttribute: "tedi-textarea" }, providers: [
|
|
19372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "textarea[tedi-textarea]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, readOnlyAttribute: { classPropertyName: "readOnlyAttribute", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readOnlyProperty: { classPropertyName: "readOnlyProperty", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-textarea--small": "resolvedSize() === 'small'", "class.tedi-textarea--not-resizable": "!resizable()", "class.tedi-textarea--auto-grow": "autoGrow()", "style.height": "heightStyle()", "style.min-height": "minHeightStyle()", "style.max-height": "maxHeightStyle()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "readOnly": "readOnly()" }, classAttribute: "tedi-textarea" }, providers: [
|
|
19070
19373
|
{
|
|
19071
19374
|
provide: NG_VALUE_ACCESSOR,
|
|
19072
19375
|
useExisting: forwardRef(() => TextareaComponent),
|
|
@@ -19102,10 +19405,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
19102
19405
|
"[style.max-height]": "maxHeightStyle()",
|
|
19103
19406
|
"[attr.aria-invalid]": "invalid() || null",
|
|
19104
19407
|
"[attr.aria-describedby]": "describedBy.attribute()",
|
|
19408
|
+
"[readOnly]": "readOnly()",
|
|
19105
19409
|
"(input)": "handleInputChange($event)",
|
|
19106
19410
|
"(blur)": "handleBlur()",
|
|
19107
19411
|
}, styles: [".tedi-textarea{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-textarea-min-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;width:100%;padding:var(--_field-padding-y) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);resize:vertical;outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-textarea::placeholder{color:var(--form-input-text-placeholder)}.tedi-textarea:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-textarea:not(.tedi-field-surface){flex:1;min-width:0}.tedi-textarea--not-resizable{resize:none}.tedi-textarea--auto-grow{field-sizing:content;resize:none}.tedi-textarea:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-visible{--_field-ring-color: var(--_field-border-color)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover{--_field-border-color: var(--form-input-border-hover)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active{--_field-border-color: var(--form-input-border-active)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-visible{--_field-border-color: var(--form-input-border-focus)}.tedi-textarea.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-textarea--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field__box:has(>.tedi-textarea){align-items:flex-start;height:auto;min-height:var(--_field-height);padding-block:0;padding-inline:0 var(--form-field-padding-x-md-default)}.tedi-form-field__box:has(>.tedi-textarea) .tedi-form-field__buttons,.tedi-form-field__box:has(>.tedi-textarea) .tedi-form-field__icon{display:flex;align-items:center;height:var(--_field-height)}.tedi-form-field__box>.tedi-textarea{padding-inline-end:calc(var(--form-field-padding-x-md-default) + var(--tedi-form-field-addon-lane));margin-inline-end:calc(-1 * (var(--form-field-padding-x-md-default) + var(--tedi-form-field-addon-lane)))}\n"] }]
|
|
19108
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
|
|
19412
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], readOnlyAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readOnlyProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
|
|
19109
19413
|
|
|
19110
19414
|
/**
|
|
19111
19415
|
* Checks if a string is a valid `HH:mm` time (00:00 – 23:59).
|
|
@@ -19164,9 +19468,32 @@ function normalizeTime(input) {
|
|
|
19164
19468
|
}
|
|
19165
19469
|
|
|
19166
19470
|
const DEFAULT_ITEM_HEIGHT = 40;
|
|
19167
|
-
|
|
19168
|
-
const
|
|
19471
|
+
/** Quiet period before a programmatic scroll counts as finished. */
|
|
19472
|
+
const SCROLL_SETTLE_QUIET_MS = 200;
|
|
19473
|
+
/** Releases a column whose programmatic scroll never fired a scroll event. */
|
|
19474
|
+
const SCROLL_SETTLE_MAX_WAIT_MS = 1000;
|
|
19169
19475
|
const SCROLL_DEBOUNCE_MS = 150;
|
|
19476
|
+
/**
|
|
19477
|
+
* How long a gesture stays armed before it has scrolled anything. A pointer can
|
|
19478
|
+
* go down on a column's padding and never move it, and nothing else would clear
|
|
19479
|
+
* the flag. Cancelled as soon as the gesture does scroll.
|
|
19480
|
+
*/
|
|
19481
|
+
const GESTURE_WITHOUT_SCROLL_MS = 500;
|
|
19482
|
+
/**
|
|
19483
|
+
* The gestures that can scroll a column. Scrollbars are hidden and scrolling
|
|
19484
|
+
* keys are handled in `onColumnKeydown`, so a scroll with none of these behind
|
|
19485
|
+
* it was not started by the user.
|
|
19486
|
+
*/
|
|
19487
|
+
const USER_GESTURE_EVENTS = [
|
|
19488
|
+
"wheel",
|
|
19489
|
+
"touchstart",
|
|
19490
|
+
"touchmove",
|
|
19491
|
+
"pointerdown",
|
|
19492
|
+
];
|
|
19493
|
+
const USER_GESTURE_OPTIONS = {
|
|
19494
|
+
capture: true,
|
|
19495
|
+
passive: true,
|
|
19496
|
+
};
|
|
19170
19497
|
class TimePickerComponent {
|
|
19171
19498
|
/** Selected time in `HH:mm` format. Two-way bindable. */
|
|
19172
19499
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
@@ -19194,12 +19521,35 @@ class TimePickerComponent {
|
|
|
19194
19521
|
onChange = () => { };
|
|
19195
19522
|
onTouched = () => { };
|
|
19196
19523
|
initialized = false;
|
|
19524
|
+
/**
|
|
19525
|
+
* Held until the programmatic scroll has actually settled, not for a fixed
|
|
19526
|
+
* time: `scrollTo` reports its own events plus the scroll-snap adjustment on
|
|
19527
|
+
* top, and the engine decides when those arrive.
|
|
19528
|
+
*/
|
|
19197
19529
|
isProgrammaticScroll = {
|
|
19198
19530
|
hour: false,
|
|
19199
19531
|
minute: false,
|
|
19200
19532
|
};
|
|
19533
|
+
isSmoothProgrammaticScroll = {
|
|
19534
|
+
hour: false,
|
|
19535
|
+
minute: false,
|
|
19536
|
+
};
|
|
19537
|
+
/** Only a scroll with a gesture behind it may change the value. */
|
|
19538
|
+
hasUserGesture = {
|
|
19539
|
+
hour: false,
|
|
19540
|
+
minute: false,
|
|
19541
|
+
};
|
|
19542
|
+
/** Guards against a correction and the engine trading scrolls indefinitely. */
|
|
19543
|
+
hasCorrectedScroll = {
|
|
19544
|
+
hour: false,
|
|
19545
|
+
minute: false,
|
|
19546
|
+
};
|
|
19547
|
+
programmaticScrollTarget = {};
|
|
19201
19548
|
scrollLockTimer = {};
|
|
19549
|
+
/** Latest moment a programmatic scroll may still own its column. */
|
|
19550
|
+
scrollLockDeadline = {};
|
|
19202
19551
|
scrollDebounceTimer = {};
|
|
19552
|
+
gestureTimer = {};
|
|
19203
19553
|
cachedItemHeight = null;
|
|
19204
19554
|
resizeObserver = null;
|
|
19205
19555
|
hourScrollIndex = signal(0, ...(ngDevMode ? [{ debugName: "hourScrollIndex" }] : []));
|
|
@@ -19276,21 +19626,53 @@ class TimePickerComponent {
|
|
|
19276
19626
|
this.initialized = true;
|
|
19277
19627
|
this.cachedItemHeight = this.measureItemHeight();
|
|
19278
19628
|
if (typeof ResizeObserver !== "undefined") {
|
|
19279
|
-
this.resizeObserver = new ResizeObserver(() =>
|
|
19629
|
+
this.resizeObserver = new ResizeObserver(() => this.syncItemHeight());
|
|
19280
19630
|
this.resizeObserver.observe(this.el.nativeElement);
|
|
19281
19631
|
}
|
|
19632
|
+
const host = this.el.nativeElement;
|
|
19633
|
+
USER_GESTURE_EVENTS.forEach((name) => {
|
|
19634
|
+
host.addEventListener(name, this.handleUserGesture, USER_GESTURE_OPTIONS);
|
|
19635
|
+
});
|
|
19282
19636
|
requestAnimationFrame(() => this.alignScroll("instant"));
|
|
19283
19637
|
}
|
|
19284
|
-
|
|
19638
|
+
/**
|
|
19639
|
+
* The height a row is actually rendered at, or 0 when it has no box at all
|
|
19640
|
+
* (the picker is hidden, or has not been laid out yet).
|
|
19641
|
+
*/
|
|
19642
|
+
measureItemBox() {
|
|
19285
19643
|
const root = this.el.nativeElement;
|
|
19286
19644
|
const item = root.querySelector(".tedi-time-picker__item");
|
|
19287
|
-
return item?.offsetHeight
|
|
19645
|
+
return item?.offsetHeight ?? 0;
|
|
19646
|
+
}
|
|
19647
|
+
measureItemHeight() {
|
|
19648
|
+
return this.measureItemBox() || DEFAULT_ITEM_HEIGHT;
|
|
19288
19649
|
}
|
|
19289
19650
|
getItemHeight() {
|
|
19290
19651
|
return this.cachedItemHeight ?? this.measureItemHeight();
|
|
19291
19652
|
}
|
|
19653
|
+
/**
|
|
19654
|
+
* Column offsets are derived from the item height, so when the height changes
|
|
19655
|
+
* (a breakpoint switch, or the first real measurement after
|
|
19656
|
+
* `DEFAULT_ITEM_HEIGHT` stood in) they no longer land on the highlighted row.
|
|
19657
|
+
*/
|
|
19658
|
+
syncItemHeight() {
|
|
19659
|
+
// A hidden element measures 0 and ResizeObserver fires for it, so keep the
|
|
19660
|
+
// last height actually rendered rather than caching the fallback.
|
|
19661
|
+
const height = this.measureItemBox();
|
|
19662
|
+
if (!height || height === this.cachedItemHeight)
|
|
19663
|
+
return;
|
|
19664
|
+
this.cachedItemHeight = height;
|
|
19665
|
+
if (this.variant() !== "scroll")
|
|
19666
|
+
return;
|
|
19667
|
+
this.scrollColumnToIndex("hour", this.hourScrollIndex(), "instant");
|
|
19668
|
+
this.scrollColumnToIndex("minute", this.minuteScrollIndex(), "instant");
|
|
19669
|
+
}
|
|
19292
19670
|
ngOnDestroy() {
|
|
19293
19671
|
this.resizeObserver?.disconnect();
|
|
19672
|
+
const host = this.el.nativeElement;
|
|
19673
|
+
USER_GESTURE_EVENTS.forEach((name) => {
|
|
19674
|
+
host.removeEventListener(name, this.handleUserGesture, USER_GESTURE_OPTIONS);
|
|
19675
|
+
});
|
|
19294
19676
|
Object.keys(this.scrollLockTimer).forEach((k) => {
|
|
19295
19677
|
const t = this.scrollLockTimer[k];
|
|
19296
19678
|
if (t)
|
|
@@ -19301,6 +19683,11 @@ class TimePickerComponent {
|
|
|
19301
19683
|
if (t)
|
|
19302
19684
|
clearTimeout(t);
|
|
19303
19685
|
});
|
|
19686
|
+
Object.keys(this.gestureTimer).forEach((k) => {
|
|
19687
|
+
const t = this.gestureTimer[k];
|
|
19688
|
+
if (t)
|
|
19689
|
+
clearTimeout(t);
|
|
19690
|
+
});
|
|
19304
19691
|
}
|
|
19305
19692
|
writeValue(value) {
|
|
19306
19693
|
this.value.set(value);
|
|
@@ -19351,6 +19738,9 @@ class TimePickerComponent {
|
|
|
19351
19738
|
onHourClick(hour) {
|
|
19352
19739
|
if (this.isDisabled())
|
|
19353
19740
|
return;
|
|
19741
|
+
// The pointer went down to pick a row, not to scroll the column.
|
|
19742
|
+
this.hasUserGesture.hour = false;
|
|
19743
|
+
this.clearGestureTimer("hour");
|
|
19354
19744
|
const idx = parseInt(hour, 10);
|
|
19355
19745
|
this.scrollColumnToIndex("hour", idx, "smooth");
|
|
19356
19746
|
this.selectHour(hour);
|
|
@@ -19359,6 +19749,8 @@ class TimePickerComponent {
|
|
|
19359
19749
|
onMinuteClick(minute) {
|
|
19360
19750
|
if (this.isDisabled())
|
|
19361
19751
|
return;
|
|
19752
|
+
this.hasUserGesture.minute = false;
|
|
19753
|
+
this.clearGestureTimer("minute");
|
|
19362
19754
|
const list = this.minutes();
|
|
19363
19755
|
const idx = list.indexOf(minute);
|
|
19364
19756
|
if (idx >= 0)
|
|
@@ -19428,33 +19820,125 @@ class TimePickerComponent {
|
|
|
19428
19820
|
return null;
|
|
19429
19821
|
}
|
|
19430
19822
|
}
|
|
19823
|
+
handleUserGesture = (event) => {
|
|
19824
|
+
const target = event.target;
|
|
19825
|
+
const column = target?.closest?.(".tedi-time-picker__column") ?? null;
|
|
19826
|
+
if (!column)
|
|
19827
|
+
return;
|
|
19828
|
+
let type = null;
|
|
19829
|
+
if (column === this.getColumnElement("hour"))
|
|
19830
|
+
type = "hour";
|
|
19831
|
+
if (column === this.getColumnElement("minute"))
|
|
19832
|
+
type = "minute";
|
|
19833
|
+
if (!type)
|
|
19834
|
+
return;
|
|
19835
|
+
this.hasUserGesture[type] = true;
|
|
19836
|
+
this.hasCorrectedScroll[type] = false;
|
|
19837
|
+
this.armGestureTimer(type);
|
|
19838
|
+
};
|
|
19839
|
+
/**
|
|
19840
|
+
* Bounds a gesture that never scrolls. Without it one pointer-down on a
|
|
19841
|
+
* column's padding would leave it marked user-driven forever, and the next
|
|
19842
|
+
* offset the engine handed it would be committed as a value.
|
|
19843
|
+
*/
|
|
19844
|
+
armGestureTimer(type) {
|
|
19845
|
+
this.clearGestureTimer(type);
|
|
19846
|
+
this.gestureTimer[type] = setTimeout(() => {
|
|
19847
|
+
this.hasUserGesture[type] = false;
|
|
19848
|
+
delete this.gestureTimer[type];
|
|
19849
|
+
}, GESTURE_WITHOUT_SCROLL_MS);
|
|
19850
|
+
}
|
|
19851
|
+
clearGestureTimer(type) {
|
|
19852
|
+
const existing = this.gestureTimer[type];
|
|
19853
|
+
if (existing)
|
|
19854
|
+
clearTimeout(existing);
|
|
19855
|
+
delete this.gestureTimer[type];
|
|
19856
|
+
}
|
|
19857
|
+
/**
|
|
19858
|
+
* Precedence, highest first: a gesture on this column (the offset is the
|
|
19859
|
+
* user's, and it takes over any animation still running), a programmatic
|
|
19860
|
+
* scroll (its own echo, never re-read as a selection), or neither, which
|
|
19861
|
+
* means the engine moved it and the column goes back on the value's row.
|
|
19862
|
+
*/
|
|
19431
19863
|
onColumnScroll(type) {
|
|
19432
19864
|
const column = this.getColumnElement(type);
|
|
19433
19865
|
if (!column)
|
|
19434
19866
|
return;
|
|
19867
|
+
if (this.hasUserGesture[type]) {
|
|
19868
|
+
// The debounce owns the flag from here, not the no-scroll timeout.
|
|
19869
|
+
this.clearGestureTimer(type);
|
|
19870
|
+
this.clearProgrammaticScroll(type);
|
|
19871
|
+
this.setScrollIndex(type, this.indexFromScroll(type, column));
|
|
19872
|
+
this.scheduleScrollSelection(type);
|
|
19873
|
+
return;
|
|
19874
|
+
}
|
|
19875
|
+
if (this.isProgrammaticScroll[type]) {
|
|
19876
|
+
// Keep the lock open for as long as events keep arriving, so a column
|
|
19877
|
+
// that is still settling (a snap adjustment on top of the scroll, a slow
|
|
19878
|
+
// frame) stays owned by the scroll that started it.
|
|
19879
|
+
this.releaseScrollLockAfter(type, SCROLL_SETTLE_QUIET_MS);
|
|
19880
|
+
// A non-smooth programmatic scroll has already set the authoritative
|
|
19881
|
+
// index. Re-deriving it from scrollTop would move the highlight to a
|
|
19882
|
+
// neighbouring row whenever the measured item height and the rendered one
|
|
19883
|
+
// disagree. Smooth ones fall through: their highlight tracks the running
|
|
19884
|
+
// animation.
|
|
19885
|
+
if (this.isSmoothProgrammaticScroll[type]) {
|
|
19886
|
+
this.setScrollIndex(type, this.indexFromScroll(type, column));
|
|
19887
|
+
return;
|
|
19888
|
+
}
|
|
19889
|
+
// A snap adjustment settles on the row next to the offset it was given,
|
|
19890
|
+
// so anything further out is not this scroll finishing.
|
|
19891
|
+
const target = this.programmaticScrollTarget[type] ?? column.scrollTop;
|
|
19892
|
+
if (Math.abs(column.scrollTop - target) <= this.getItemHeight())
|
|
19893
|
+
return;
|
|
19894
|
+
}
|
|
19895
|
+
this.restoreColumnPosition(type);
|
|
19896
|
+
}
|
|
19897
|
+
indexFromScroll(type, column) {
|
|
19435
19898
|
const list = type === "hour" ? this.hours : this.minutes();
|
|
19436
19899
|
const rawIndex = Math.round(column.scrollTop / this.getItemHeight());
|
|
19437
|
-
|
|
19900
|
+
return Math.max(0, Math.min(rawIndex, list.length - 1));
|
|
19901
|
+
}
|
|
19902
|
+
setScrollIndex(type, index) {
|
|
19438
19903
|
if (type === "hour")
|
|
19439
19904
|
this.hourScrollIndex.set(index);
|
|
19440
19905
|
else
|
|
19441
19906
|
this.minuteScrollIndex.set(index);
|
|
19442
|
-
|
|
19443
|
-
|
|
19907
|
+
}
|
|
19908
|
+
scheduleScrollSelection(type) {
|
|
19444
19909
|
const existing = this.scrollDebounceTimer[type];
|
|
19445
19910
|
if (existing)
|
|
19446
19911
|
clearTimeout(existing);
|
|
19447
19912
|
this.scrollDebounceTimer[type] = setTimeout(() => {
|
|
19448
|
-
|
|
19449
|
-
|
|
19913
|
+
delete this.scrollDebounceTimer[type];
|
|
19914
|
+
this.hasUserGesture[type] = false;
|
|
19915
|
+
this.clearGestureTimer(type);
|
|
19916
|
+
const column = this.getColumnElement(type);
|
|
19917
|
+
if (!column)
|
|
19450
19918
|
return;
|
|
19451
|
-
const
|
|
19919
|
+
const list = type === "hour" ? this.hours : this.minutes();
|
|
19920
|
+
const index = this.indexFromScroll(type, column);
|
|
19452
19921
|
if (type === "hour")
|
|
19453
|
-
this.selectHour(list[
|
|
19922
|
+
this.selectHour(list[index]);
|
|
19454
19923
|
else
|
|
19455
|
-
this.selectMinute(list[
|
|
19924
|
+
this.selectMinute(list[index]);
|
|
19456
19925
|
}, SCROLL_DEBOUNCE_MS);
|
|
19457
19926
|
}
|
|
19927
|
+
/**
|
|
19928
|
+
* Gecko hands a torn-down scroll container's offset to the one replacing it
|
|
19929
|
+
* in the same position, so a picker can arrive already scrolled to the
|
|
19930
|
+
* previous picker's row. Nothing marks that as not-the-user, which is how
|
|
19931
|
+
* `09:30` came to render and report `14:06`.
|
|
19932
|
+
*/
|
|
19933
|
+
restoreColumnPosition(type) {
|
|
19934
|
+
if (this.hasCorrectedScroll[type])
|
|
19935
|
+
return;
|
|
19936
|
+
const index = type === "hour" ? this.selectedHourIndex() : this.selectedMinuteIndex();
|
|
19937
|
+
// Only a correction that moved the column spends the one-shot budget.
|
|
19938
|
+
if (this.scrollColumnToIndex(type, index, "instant")) {
|
|
19939
|
+
this.hasCorrectedScroll[type] = true;
|
|
19940
|
+
}
|
|
19941
|
+
}
|
|
19458
19942
|
/** Roving-tabindex helper for dropdown items: only the selected item (or the first
|
|
19459
19943
|
* when nothing is selected yet) is in the tab sequence. */
|
|
19460
19944
|
getDropdownTabIndex(index) {
|
|
@@ -19544,21 +20028,30 @@ class TimePickerComponent {
|
|
|
19544
20028
|
return;
|
|
19545
20029
|
const targetHour = this.selectedHourIndex();
|
|
19546
20030
|
const targetMinute = this.selectedMinuteIndex();
|
|
20031
|
+
// A fresh alignment is a fresh start for the correction guard.
|
|
20032
|
+
this.hasCorrectedScroll.hour = false;
|
|
20033
|
+
this.hasCorrectedScroll.minute = false;
|
|
19547
20034
|
if (behavior !== "smooth") {
|
|
19548
20035
|
this.hourScrollIndex.set(targetHour);
|
|
19549
20036
|
this.minuteScrollIndex.set(targetMinute);
|
|
19550
20037
|
}
|
|
19551
|
-
|
|
20038
|
+
// Only a smooth scroll is worth protecting from a realignment: it is still
|
|
20039
|
+
// animating towards the value that started it, and an instant scrollTo to
|
|
20040
|
+
// the same row would cut that animation short. An instant scroll has
|
|
20041
|
+
// already arrived, so a new value must be allowed to move the column even
|
|
20042
|
+
// while the column is settling.
|
|
20043
|
+
if (!this.isSmoothProgrammaticScroll.hour) {
|
|
19552
20044
|
this.scrollColumnToIndex("hour", targetHour, behavior);
|
|
19553
20045
|
}
|
|
19554
|
-
if (!this.
|
|
20046
|
+
if (!this.isSmoothProgrammaticScroll.minute) {
|
|
19555
20047
|
this.scrollColumnToIndex("minute", targetMinute, behavior);
|
|
19556
20048
|
}
|
|
19557
20049
|
}
|
|
20050
|
+
/** Returns whether a scroll was actually issued. */
|
|
19558
20051
|
scrollColumnToIndex(type, index, behavior = "auto") {
|
|
19559
20052
|
const column = this.getColumnElement(type);
|
|
19560
20053
|
if (!column)
|
|
19561
|
-
return;
|
|
20054
|
+
return false;
|
|
19562
20055
|
const target = index * this.getItemHeight();
|
|
19563
20056
|
if (behavior !== "smooth") {
|
|
19564
20057
|
if (type === "hour")
|
|
@@ -19567,20 +20060,46 @@ class TimePickerComponent {
|
|
|
19567
20060
|
this.minuteScrollIndex.set(index);
|
|
19568
20061
|
}
|
|
19569
20062
|
if (Math.abs(column.scrollTop - target) < 1)
|
|
19570
|
-
return;
|
|
20063
|
+
return false;
|
|
19571
20064
|
this.isProgrammaticScroll[type] = true;
|
|
19572
|
-
|
|
19573
|
-
|
|
19574
|
-
clearTimeout(existing);
|
|
20065
|
+
this.isSmoothProgrammaticScroll[type] = behavior === "smooth";
|
|
20066
|
+
this.programmaticScrollTarget[type] = target;
|
|
19575
20067
|
if (typeof column.scrollTo === "function") {
|
|
19576
20068
|
column.scrollTo({ top: target, behavior });
|
|
19577
20069
|
}
|
|
19578
20070
|
else {
|
|
19579
20071
|
column.scrollTop = target;
|
|
19580
20072
|
}
|
|
20073
|
+
this.scrollLockDeadline[type] = Date.now() + SCROLL_SETTLE_MAX_WAIT_MS;
|
|
20074
|
+
this.releaseScrollLockAfter(type, SCROLL_SETTLE_MAX_WAIT_MS);
|
|
20075
|
+
return true;
|
|
20076
|
+
}
|
|
20077
|
+
releaseScrollLockAfter(type, delay) {
|
|
20078
|
+
const existing = this.scrollLockTimer[type];
|
|
20079
|
+
if (existing)
|
|
20080
|
+
clearTimeout(existing);
|
|
20081
|
+
const deadline = this.scrollLockDeadline[type];
|
|
20082
|
+
const wait = deadline === undefined
|
|
20083
|
+
? delay
|
|
20084
|
+
: Math.max(0, Math.min(delay, deadline - Date.now()));
|
|
19581
20085
|
this.scrollLockTimer[type] = setTimeout(() => {
|
|
19582
20086
|
this.isProgrammaticScroll[type] = false;
|
|
19583
|
-
|
|
20087
|
+
this.isSmoothProgrammaticScroll[type] = false;
|
|
20088
|
+
delete this.programmaticScrollTarget[type];
|
|
20089
|
+
delete this.scrollLockTimer[type];
|
|
20090
|
+
delete this.scrollLockDeadline[type];
|
|
20091
|
+
}, wait);
|
|
20092
|
+
}
|
|
20093
|
+
/** Drops every trace of a programmatic scroll, target offset included. */
|
|
20094
|
+
clearProgrammaticScroll(type) {
|
|
20095
|
+
const existing = this.scrollLockTimer[type];
|
|
20096
|
+
if (existing)
|
|
20097
|
+
clearTimeout(existing);
|
|
20098
|
+
delete this.scrollLockTimer[type];
|
|
20099
|
+
delete this.scrollLockDeadline[type];
|
|
20100
|
+
this.isProgrammaticScroll[type] = false;
|
|
20101
|
+
this.isSmoothProgrammaticScroll[type] = false;
|
|
20102
|
+
delete this.programmaticScrollTarget[type];
|
|
19584
20103
|
}
|
|
19585
20104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19586
20105
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [
|
|
@@ -19691,8 +20210,17 @@ class TimeFieldComponent {
|
|
|
19691
20210
|
* set here.
|
|
19692
20211
|
*/
|
|
19693
20212
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
19694
|
-
/**
|
|
19695
|
-
|
|
20213
|
+
/**
|
|
20214
|
+
* Whether the clear button shows once the field has a value. Falls back to the
|
|
20215
|
+
* wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
|
|
20216
|
+
* wrapper, and use this only for a standalone field.
|
|
20217
|
+
*/
|
|
20218
|
+
clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable",
|
|
20219
|
+
// Unset stays `undefined` so the wrapper's `clearable` still applies.
|
|
20220
|
+
transform: (v) => (v == null ? undefined : booleanAttribute(v)) }] : [{
|
|
20221
|
+
// Unset stays `undefined` so the wrapper's `clearable` still applies.
|
|
20222
|
+
transform: (v) => (v == null ? undefined : booleanAttribute(v)),
|
|
20223
|
+
}]));
|
|
19696
20224
|
/** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
|
|
19697
20225
|
pickerVariant = input("scroll", ...(ngDevMode ? [{ debugName: "pickerVariant" }] : []));
|
|
19698
20226
|
/**
|
|
@@ -19744,7 +20272,11 @@ class TimeFieldComponent {
|
|
|
19744
20272
|
this.derived.connect();
|
|
19745
20273
|
}
|
|
19746
20274
|
hasValue = computed(() => this.value() !== null && this.value() !== "", ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
|
|
19747
|
-
showClear = computed(() => this.hasValue() && this.
|
|
20275
|
+
showClear = computed(() => this.hasValue() && this.clearableResolved(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
|
|
20276
|
+
/** The clear button sits in the time field's action row, beside the picker. */
|
|
20277
|
+
ownsClearButton = true;
|
|
20278
|
+
/** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
|
|
20279
|
+
clearableResolved = computed(() => this.clearable() ?? this.fieldContext?.clearable() ?? true, ...(ngDevMode ? [{ debugName: "clearableResolved" }] : []));
|
|
19748
20280
|
useNativePickerResolved = computed(() => {
|
|
19749
20281
|
const v = this.useNativePicker();
|
|
19750
20282
|
return typeof v === "boolean"
|
|
@@ -20003,7 +20535,7 @@ class TimeFieldComponent {
|
|
|
20003
20535
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
20004
20536
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
20005
20537
|
},
|
|
20006
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20538
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20007
20539
|
}
|
|
20008
20540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
20009
20541
|
type: Component,
|
|
@@ -20032,7 +20564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20032
20564
|
class: "tedi-time-field",
|
|
20033
20565
|
"[class.tedi-time-field--small]": "resolvedSize() === 'small'",
|
|
20034
20566
|
"[class.tedi-time-field--large]": "resolvedSize() === 'large'",
|
|
20035
|
-
}, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
|
|
20567
|
+
}, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
|
|
20036
20568
|
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
|
|
20037
20569
|
|
|
20038
20570
|
class ProgressBarComponent {
|
|
@@ -20679,11 +21211,13 @@ class FooterComponent {
|
|
|
20679
21211
|
breakpointService = inject(BreakpointService);
|
|
20680
21212
|
mobileLayout = this.breakpointService.isBelowBreakpoint("sm");
|
|
20681
21213
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20682
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: FooterComponent, isStandalone: true, selector: "tedi-footer", ngImport: i0, template: "<footer class=\"tedi-footer\">\n <div\n class=\"tedi-footer__container\"\n [class.tedi-footer--mobile]=\"mobileLayout()\"\n >\n <ng-content select=\"[tedi-footer-start]\" />\n <div class=\"tedi-footer__center\">\n <ng-content select=\"tedi-footer-body\" />\n </div>\n <ng-content select=\"[tedi-footer-end]\" />\n </div>\n <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: FooterComponent, isStandalone: true, selector: "tedi-footer", host: { classAttribute: "no-print" }, ngImport: i0, template: "<footer class=\"tedi-footer\">\n <div\n class=\"tedi-footer__container\"\n [class.tedi-footer--mobile]=\"mobileLayout()\"\n >\n <ng-content select=\"[tedi-footer-start]\" />\n <div class=\"tedi-footer__center\">\n <ng-content select=\"tedi-footer-body\" />\n </div>\n <ng-content select=\"[tedi-footer-end]\" />\n </div>\n <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20683
21215
|
}
|
|
20684
21216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FooterComponent, decorators: [{
|
|
20685
21217
|
type: Component,
|
|
20686
|
-
args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: "tedi-footer",
|
|
21218
|
+
args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: "tedi-footer", host: {
|
|
21219
|
+
class: "no-print",
|
|
21220
|
+
}, template: "<footer class=\"tedi-footer\">\n <div\n class=\"tedi-footer__container\"\n [class.tedi-footer--mobile]=\"mobileLayout()\"\n >\n <ng-content select=\"[tedi-footer-start]\" />\n <div class=\"tedi-footer__center\">\n <ng-content select=\"tedi-footer-body\" />\n </div>\n <ng-content select=\"[tedi-footer-end]\" />\n </div>\n <ng-content select=\"tedi-footer-bottom\" />\n</footer>\n", styles: [".tedi-footer{background-color:var(--footer-background)}.tedi-footer__container{display:flex}.tedi-footer__center{width:100%}.tedi-footer--mobile{display:flex;flex-direction:column}\n"] }]
|
|
20687
21221
|
}] });
|
|
20688
21222
|
|
|
20689
21223
|
class FooterBodyComponent {
|
|
@@ -20849,12 +21383,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20849
21383
|
|
|
20850
21384
|
class HeaderComponent {
|
|
20851
21385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n <div class=\"tedi-header__main--content\">\n <ng-content></ng-content>\n </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header no-print" }, ngImport: i0, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n <div class=\"tedi-header__main--content\">\n <ng-content></ng-content>\n </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20853
21387
|
}
|
|
20854
21388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
20855
21389
|
type: Component,
|
|
20856
21390
|
args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
20857
|
-
class: "tedi-header",
|
|
21391
|
+
class: "tedi-header no-print",
|
|
20858
21392
|
}, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n <div class=\"tedi-header__main--content\">\n <ng-content></ng-content>\n </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"] }]
|
|
20859
21393
|
}] });
|
|
20860
21394
|
|
|
@@ -20976,7 +21510,7 @@ class HeaderLanguageComponent {
|
|
|
20976
21510
|
this.popover()?.hidePopover();
|
|
20977
21511
|
}
|
|
20978
21512
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, languageHrefs: { classPropertyName: "languageHrefs", publicName: "languageHrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { properties: { "class.tedi-header-language--label-left": "labelPosition() === 'left'" }, classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n >\n <span>{{ displayedLanguage() }}</span>\n <tedi-icon\n name=\"expand_more\"\n [size]=\"18\"\n color=\"inherit\"\n class=\"tedi-header-language__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n @for (language of languageKeys(); track language) {\n @if (languageHrefs()?.[language]; as href) {\n <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n <span>{{ languages()[language] }}</span>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n }\n }\n </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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 });
|
|
21513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, languageHrefs: { classPropertyName: "languageHrefs", publicName: "languageHrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { properties: { "class.tedi-header-language--label-left": "labelPosition() === 'left'" }, classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-language__label\"\n >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-popover-trigger\n class=\"tedi-link tedi-header__link-button\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n >\n <span>{{ displayedLanguage() }}</span>\n <tedi-icon\n name=\"expand_more\"\n [size]=\"18\"\n color=\"inherit\"\n class=\"tedi-header-language__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"none\">\n @for (language of languageKeys(); track language) {\n @if (languageHrefs()?.[language]; as href) {\n <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n <span>{{ languages()[language] }}</span>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"tedi-link tedi-header__link-button\"\n (click)=\"handleChangeLang(language)\"\n >\n <span>{{ languages()[language] }}</span>\n </button>\n }\n }\n </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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 });
|
|
20980
21514
|
}
|
|
20981
21515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
|
|
20982
21516
|
type: Component,
|
|
@@ -21472,7 +22006,7 @@ class HeaderProfileComponent {
|
|
|
21472
22006
|
}
|
|
21473
22007
|
}
|
|
21474
22008
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21475
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </tedi-popover-content>\n </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n @if (isSmall()) {\n <tedi-header-mobile-button\n [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n [label]=\"resolvedLabel()\"\n [selected]=\"modalOpen()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n />\n } @else {\n <button\n type=\"button\"\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n }\n <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n class=\"tedi-header-profile__icon\"\n [class.tedi-header-profile__icon--small]=\"showLabel()\"\n />\n @if (showLabel()) {\n <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n }\n</ng-template>\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div\n class=\"tedi-header-profile__modal\"\n [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n <button\n type=\"button\"\n tedi-button\n tedi-popover-trigger\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </tedi-popover-content>\n </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n @if (isSmall()) {\n <tedi-header-mobile-button\n [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n [label]=\"resolvedLabel()\"\n [selected]=\"modalOpen()\"\n ariaHasPopup=\"dialog\"\n [ariaExpanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n />\n } @else {\n <button\n type=\"button\"\n tedi-button\n [attr.data-open]=\"modalOpen()\"\n [variant]=\"buttonVariant()\"\n [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"modalOpen()\"\n (click)=\"handleModalOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n }\n <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n <tedi-icon\n name=\"account_circle\"\n color=\"brand\"\n class=\"tedi-header-profile__icon\"\n [class.tedi-header-profile__icon--small]=\"showLabel()\"\n />\n @if (showLabel()) {\n <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n }\n</ng-template>\n\n<ng-template #modal>\n @if (modalOpen()) {\n <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n <div\n class=\"tedi-header-profile__modal\"\n [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n }\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21476
22010
|
}
|
|
21477
22011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, decorators: [{
|
|
21478
22012
|
type: Component,
|
|
@@ -21745,7 +22279,7 @@ class HeaderRoleComponent {
|
|
|
21745
22279
|
return { name: icon.name, size: icon.size ?? 24 };
|
|
21746
22280
|
}
|
|
21747
22281
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21748
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", 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", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: SearchComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n >\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n >\n <div class=\"tedi-header-role__info-title\">\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n <p tedi-text modifiers=\"bold\" color=\"secondary\">\n {{ currentRepresentative().name }}\n </p>\n </div>\n @if (description()) {\n @if (!hasRoleSelection()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (hasRoleSelection()) {\n <button\n type=\"button\"\n tedi-button\n variant=\"neutral\"\n (click)=\"handleMobileOpen()\"\n >\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (hasRoleSelection()) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse--items\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (label() || description() || hasTitle()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n @if (hasRoleSelection()) {\n <tedi-popover\n [withBorder]=\"true\"\n position=\"bottom\"\n [preventOverflow]=\"true\"\n >\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\n name=\"expand_more\"\n [size]=\"16\"\n class=\"tedi-header-role__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </tedi-popover-content>\n </tedi-popover>\n } @else {\n <div class=\"tedi-header-role__value\">\n {{ currentRepresentative().name }}\n </div>\n }\n</ng-container>\n\n<ng-template #content>\n @if (showSearch()) {\n <tedi-search\n [inputId]=\"inputId\"\n [label]=\"searchText()\"\n [value]=\"inputValue()\"\n [clearable]=\"searchClearable()\"\n (valueChange)=\"handleInputChange($event)\"\n />\n }\n @if (filteredRepresentatives().length === 0) {\n @if (hasNoResultsContent()) {\n <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n } @else {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n }\n @for (r of filteredRepresentatives(); track r.id) {\n <button\n type=\"button\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"r.id === currentRepresentative().id\"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (resolveIcon(r.icon); as icon) {\n <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div tedi-text modifiers=\"small\">\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n }\n</ng-template>\n\n<ng-template #roleTitle>\n <ng-content select=\"[tedi-header-role-title]\">\n @if (label(); as labelText) {\n <p\n tedi-text\n [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n color=\"secondary\"\n >\n {{ labelText }}\n </p>\n }\n </ng-content>\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;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.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__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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__representative [tedi-text]{color:inherit}.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:minmax(0,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:minmax(0,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;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "showClearOnInteraction", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel", "suggestions", "bindLabel", "bindDescription", "bindDisabled", "minQueryLength", "loading", "hideOnScroll", "panelOpen", "noResultsText", "loadingText", "resultsCountText"], outputs: ["valueChange", "panelOpenChange", "searchEvent", "clear", "suggestionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22282
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", 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", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: SearchComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n <div\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n >\n <div\n tedi-text\n color=\"secondary\"\n class=\"tedi-header-role__info\"\n [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n >\n <div class=\"tedi-header-role__info-title\">\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n <p tedi-text modifiers=\"bold\" color=\"secondary\">\n {{ currentRepresentative().name }}\n </p>\n </div>\n @if (description()) {\n @if (!hasRoleSelection()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n @if (hasRoleSelection()) {\n <button\n type=\"button\"\n tedi-button\n variant=\"neutral\"\n (click)=\"handleMobileOpen()\"\n >\n {{ collapseText() }}\n <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n </button>\n }\n </div>\n @if (hasRoleSelection()) {\n <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n <div class=\"tedi-header-role__collapse--items\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n </div>\n }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n @if (label() || description() || hasTitle()) {\n <div\n tedi-text\n color=\"secondary\"\n modifiers=\"small\"\n class=\"tedi-header-role__head\"\n [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n >\n <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n @if (description()) {\n <span class=\"tedi-header-role__description\">{{ description() }}</span>\n }\n </div>\n }\n\n @if (hasRoleSelection()) {\n <tedi-popover\n [withBorder]=\"true\"\n position=\"bottom\"\n [preventOverflow]=\"true\"\n >\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\n name=\"expand_more\"\n [size]=\"16\"\n class=\"tedi-header-role__chevron\"\n />\n </button>\n <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n @if (hasCustomContent()) {\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate()\"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </tedi-popover-content>\n </tedi-popover>\n } @else {\n <div class=\"tedi-header-role__value\">\n {{ currentRepresentative().name }}\n </div>\n }\n</ng-container>\n\n<ng-template #content>\n @if (showSearch()) {\n <tedi-search\n [inputId]=\"inputId\"\n [label]=\"searchText()\"\n [value]=\"inputValue()\"\n [clearable]=\"searchClearable()\"\n (valueChange)=\"handleInputChange($event)\"\n />\n }\n @if (filteredRepresentatives().length === 0) {\n @if (hasNoResultsContent()) {\n <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n } @else {\n <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n }\n }\n @for (r of filteredRepresentatives(); track r.id) {\n <button\n type=\"button\"\n class=\"tedi-header-role__representative\"\n [attr.data-selected]=\"r.id === currentRepresentative().id\"\n (click)=\"handleSelectRepresentative(r)\"\n >\n @if (resolveIcon(r.icon); as icon) {\n <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n }\n <div>\n <div>{{ r.name }}</div>\n @if (r.description) {\n <div tedi-text modifiers=\"small\">\n {{ r.description }}\n </div>\n }\n </div>\n </button>\n }\n</ng-template>\n\n<ng-template #roleTitle>\n <ng-content select=\"[tedi-header-role-title]\">\n @if (label(); as labelText) {\n <p\n tedi-text\n [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n color=\"secondary\"\n >\n {{ labelText }}\n </p>\n }\n </ng-content>\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;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.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__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);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(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-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__representative [tedi-text]{color:inherit}.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:minmax(0,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:minmax(0,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;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "showClearOnInteraction", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel", "suggestions", "bindLabel", "bindDescription", "bindDisabled", "minQueryLength", "loading", "hideOnScroll", "panelOpen", "noResultsText", "loadingText", "resultsCountText"], outputs: ["valueChange", "panelOpenChange", "searchEvent", "clear", "suggestionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21749
22283
|
}
|
|
21750
22284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
|
|
21751
22285
|
type: Component,
|
|
@@ -22025,7 +22559,11 @@ class SideNavComponent {
|
|
|
22025
22559
|
}, { injector: this.injector });
|
|
22026
22560
|
}
|
|
22027
22561
|
classes = computed(() => {
|
|
22028
|
-
const classList = [
|
|
22562
|
+
const classList = [
|
|
22563
|
+
"tedi-sidenav",
|
|
22564
|
+
"no-print",
|
|
22565
|
+
`tedi-sidenav--${this.size()}`,
|
|
22566
|
+
];
|
|
22029
22567
|
if (this.dividers()) {
|
|
22030
22568
|
classList.push("tedi-sidenav--dividers");
|
|
22031
22569
|
}
|
|
@@ -23431,6 +23969,15 @@ class TabsListComponent {
|
|
|
23431
23969
|
overflowMode = input("dropdown", ...(ngDevMode ? [{ debugName: "overflowMode" }] : []));
|
|
23432
23970
|
/** Label for the overflow dropdown trigger. Defaults to the `more` translation. */
|
|
23433
23971
|
dropdownLabel = input(...(ngDevMode ? [undefined, { debugName: "dropdownLabel" }] : []));
|
|
23972
|
+
/**
|
|
23973
|
+
* Controls the visibility of the tablist when printing.
|
|
23974
|
+
* - `show`: the tablist is printed (default), no print class is applied
|
|
23975
|
+
* - `hide`: the tablist is left out of the printed output
|
|
23976
|
+
*
|
|
23977
|
+
* `tediPrint` on the same element composes with this: `tediPrint="show"`
|
|
23978
|
+
* wins over `printVisibility="hide"`, matching the core `show-print` rule.
|
|
23979
|
+
*/
|
|
23980
|
+
printVisibility = input("show", ...(ngDevMode ? [{ debugName: "printVisibility" }] : []));
|
|
23434
23981
|
listRef = viewChild.required("list");
|
|
23435
23982
|
triggers = contentChildren(TabsTriggerComponent, ...(ngDevMode ? [{ debugName: "triggers" }] : []));
|
|
23436
23983
|
isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : []));
|
|
@@ -23526,7 +24073,7 @@ class TabsListComponent {
|
|
|
23526
24073
|
this.isOverflowing.set(naturalWidth > wrapper.clientWidth);
|
|
23527
24074
|
}
|
|
23528
24075
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsListComponent, isStandalone: true, selector: "tedi-tabs-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-tabs-list--fade-start": "overflowMode() === 'scroll' && canScrollStart()", "class.tedi-tabs-list--fade-end": "overflowMode() === 'scroll' && canScrollEnd()" }, classAttribute: "tedi-tabs-list" }, queries: [{ propertyName: "triggers", predicate: TabsTriggerComponent, isSignal: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #list\n role=\"tablist\"\n data-name=\"tabs-list\"\n class=\"tedi-tabs-list__items\"\n [class.tedi-tabs-list__items--overflow]=\"showMore()\"\n [class.tedi-tabs-list__items--scroll]=\"overflowMode() === 'scroll'\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n (scroll)=\"updateScrollFade()\"\n>\n <ng-content />\n</div>\n\n@if (showMore()) {\n <div class=\"tedi-tabs-list__more\">\n <tedi-dropdown position=\"bottom-end\">\n <button\n type=\"button\"\n tedi-dropdown-trigger\n class=\"tedi-tabs-list__more-btn\"\n >\n {{ dropdownLabel() || (\"more\" | tediTranslate) }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" color=\"inherit\" />\n </button>\n <tedi-dropdown-content dropdownRole=\"menu\">\n @for (item of dropdownItems(); track item.id) {\n <li\n tedi-dropdown-item\n [value]=\"item.id\"\n [disabled]=\"item.disabled\"\n [clipContent]=\"false\"\n [attr.aria-label]=\"item.trigger.label\"\n (itemSelect)=\"selectTab(item.id)\"\n >\n <span [tediTabsOverflowContent]=\"item.trigger\"></span>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n </div>\n}\n", styles: [".tedi-tabs-list{position:relative;display:flex;overflow:hidden;background:var(--tab-background);border-top-left-radius:var(--tab-top-radius);border-top-right-radius:var(--tab-top-radius)}.tedi-tabs-list--fade-start:before,.tedi-tabs-list--fade-end:after{position:absolute;top:0;bottom:0;z-index:1;width:3rem;pointer-events:none;content:\"\"}.tedi-tabs-list--fade-start:before{left:0;background:linear-gradient(to right,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list--fade-end:after{right:0;background:linear-gradient(to left,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list__items{display:flex;flex:1;min-width:0;overflow:hidden}.tedi-tabs-list__items--overflow .tedi-tabs-trigger:not(.tedi-tabs-trigger--selected){display:none}.tedi-tabs-list__items--overflow .tedi-tabs-trigger--selected{flex-grow:1;min-width:0}.tedi-tabs-list__items--scroll{overflow-x:auto}.tedi-tabs-list__more{display:flex;flex-shrink:0}.tedi-tabs-list__more-btn{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-list__more-btn:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-list__more-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-list__more-btn:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: TabsOverflowContentDirective, selector: "[tediTabsOverflowContent]", inputs: ["tediTabsOverflowContent"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24076
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsListComponent, isStandalone: true, selector: "tedi-tabs-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null }, printVisibility: { classPropertyName: "printVisibility", publicName: "printVisibility", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-print": "printVisibility() === 'hide'", "class.tedi-tabs-list--fade-start": "overflowMode() === 'scroll' && canScrollStart()", "class.tedi-tabs-list--fade-end": "overflowMode() === 'scroll' && canScrollEnd()" }, classAttribute: "tedi-tabs-list" }, queries: [{ propertyName: "triggers", predicate: TabsTriggerComponent, isSignal: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #list\n role=\"tablist\"\n data-name=\"tabs-list\"\n class=\"tedi-tabs-list__items\"\n [class.tedi-tabs-list__items--overflow]=\"showMore()\"\n [class.tedi-tabs-list__items--scroll]=\"overflowMode() === 'scroll'\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n (scroll)=\"updateScrollFade()\"\n>\n <ng-content />\n</div>\n\n@if (showMore()) {\n <div class=\"tedi-tabs-list__more\">\n <tedi-dropdown position=\"bottom-end\">\n <button\n type=\"button\"\n tedi-dropdown-trigger\n class=\"tedi-tabs-list__more-btn\"\n >\n {{ dropdownLabel() || (\"more\" | tediTranslate) }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" color=\"inherit\" />\n </button>\n <tedi-dropdown-content dropdownRole=\"menu\">\n @for (item of dropdownItems(); track item.id) {\n <li\n tedi-dropdown-item\n [value]=\"item.id\"\n [disabled]=\"item.disabled\"\n [clipContent]=\"false\"\n [attr.aria-label]=\"item.trigger.label\"\n (itemSelect)=\"selectTab(item.id)\"\n >\n <span [tediTabsOverflowContent]=\"item.trigger\"></span>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n </div>\n}\n", styles: [".tedi-tabs-list{position:relative;display:flex;overflow:hidden;background:var(--tab-background);border-top-left-radius:var(--tab-top-radius);border-top-right-radius:var(--tab-top-radius)}.tedi-tabs-list--fade-start:before,.tedi-tabs-list--fade-end:after{position:absolute;top:0;bottom:0;z-index:1;width:3rem;pointer-events:none;content:\"\"}.tedi-tabs-list--fade-start:before{left:0;background:linear-gradient(to right,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list--fade-end:after{right:0;background:linear-gradient(to left,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list__items{display:flex;flex:1;min-width:0;overflow:hidden}.tedi-tabs-list__items--overflow .tedi-tabs-trigger:not(.tedi-tabs-trigger--selected){display:none}.tedi-tabs-list__items--overflow .tedi-tabs-trigger--selected{flex-grow:1;min-width:0}.tedi-tabs-list__items--scroll{overflow-x:auto}.tedi-tabs-list__more{display:flex;flex-shrink:0}.tedi-tabs-list__more-btn{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-list__more-btn:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-list__more-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-list__more-btn:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: TabsOverflowContentDirective, selector: "[tediTabsOverflowContent]", inputs: ["tediTabsOverflowContent"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23530
24077
|
}
|
|
23531
24078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsListComponent, decorators: [{
|
|
23532
24079
|
type: Component,
|
|
@@ -23540,10 +24087,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
23540
24087
|
TabsOverflowContentDirective,
|
|
23541
24088
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
23542
24089
|
class: "tedi-tabs-list",
|
|
24090
|
+
"[class.no-print]": "printVisibility() === 'hide'",
|
|
23543
24091
|
"[class.tedi-tabs-list--fade-start]": "overflowMode() === 'scroll' && canScrollStart()",
|
|
23544
24092
|
"[class.tedi-tabs-list--fade-end]": "overflowMode() === 'scroll' && canScrollEnd()",
|
|
23545
24093
|
}, template: "<div\n #list\n role=\"tablist\"\n data-name=\"tabs-list\"\n class=\"tedi-tabs-list__items\"\n [class.tedi-tabs-list__items--overflow]=\"showMore()\"\n [class.tedi-tabs-list__items--scroll]=\"overflowMode() === 'scroll'\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n (scroll)=\"updateScrollFade()\"\n>\n <ng-content />\n</div>\n\n@if (showMore()) {\n <div class=\"tedi-tabs-list__more\">\n <tedi-dropdown position=\"bottom-end\">\n <button\n type=\"button\"\n tedi-dropdown-trigger\n class=\"tedi-tabs-list__more-btn\"\n >\n {{ dropdownLabel() || (\"more\" | tediTranslate) }}\n <tedi-icon name=\"expand_more\" [size]=\"18\" color=\"inherit\" />\n </button>\n <tedi-dropdown-content dropdownRole=\"menu\">\n @for (item of dropdownItems(); track item.id) {\n <li\n tedi-dropdown-item\n [value]=\"item.id\"\n [disabled]=\"item.disabled\"\n [clipContent]=\"false\"\n [attr.aria-label]=\"item.trigger.label\"\n (itemSelect)=\"selectTab(item.id)\"\n >\n <span [tediTabsOverflowContent]=\"item.trigger\"></span>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n </div>\n}\n", styles: [".tedi-tabs-list{position:relative;display:flex;overflow:hidden;background:var(--tab-background);border-top-left-radius:var(--tab-top-radius);border-top-right-radius:var(--tab-top-radius)}.tedi-tabs-list--fade-start:before,.tedi-tabs-list--fade-end:after{position:absolute;top:0;bottom:0;z-index:1;width:3rem;pointer-events:none;content:\"\"}.tedi-tabs-list--fade-start:before{left:0;background:linear-gradient(to right,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list--fade-end:after{right:0;background:linear-gradient(to left,var(--tab-background) 10%,transparent 80%)}.tedi-tabs-list__items{display:flex;flex:1;min-width:0;overflow:hidden}.tedi-tabs-list__items--overflow .tedi-tabs-trigger:not(.tedi-tabs-trigger--selected){display:none}.tedi-tabs-list__items--overflow .tedi-tabs-trigger--selected{flex-grow:1;min-width:0}.tedi-tabs-list__items--scroll{overflow-x:auto}.tedi-tabs-list__more{display:flex;flex-shrink:0}.tedi-tabs-list__more-btn{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-list__more-btn:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-list__more-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-list__more-btn:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}\n"] }]
|
|
23546
|
-
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], dropdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabel", required: false }] }], listRef: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }], triggers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTriggerComponent), { isSignal: true }] }] } });
|
|
24094
|
+
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], overflowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowMode", required: false }] }], dropdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabel", required: false }] }], printVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "printVisibility", required: false }] }], listRef: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }], triggers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTriggerComponent), { isSignal: true }] }] } });
|
|
23547
24095
|
|
|
23548
24096
|
/**
|
|
23549
24097
|
* A tab panel. When `id` matches a trigger, the panel is only shown while that
|
|
@@ -23591,6 +24139,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
23591
24139
|
}]
|
|
23592
24140
|
}] });
|
|
23593
24141
|
|
|
24142
|
+
/**
|
|
24143
|
+
* Applies the print helper classes from `@tedi-design-system/core` to the host element.
|
|
24144
|
+
*/
|
|
24145
|
+
class PrintDirective {
|
|
24146
|
+
elementRef = inject(ElementRef);
|
|
24147
|
+
renderer = inject(Renderer2);
|
|
24148
|
+
/**
|
|
24149
|
+
* Controls the visibility of the element when printing.
|
|
24150
|
+
* - `'hide'` — the element is not printed.
|
|
24151
|
+
* - `'show'` — the element opts out of a `no-print` applied to the same
|
|
24152
|
+
* element. It cannot reveal an element that an ancestor hid.
|
|
24153
|
+
*
|
|
24154
|
+
* Leave empty when only the break inputs are needed — the `tediPrint`
|
|
24155
|
+
* attribute still has to be present for the directive to apply.
|
|
24156
|
+
*/
|
|
24157
|
+
tediPrint = input("", ...(ngDevMode ? [{ debugName: "tediPrint" }] : []));
|
|
24158
|
+
/**
|
|
24159
|
+
* Determines how page, column, or region breaks behave before the element.
|
|
24160
|
+
* Uses the CSS `break-before` property values.
|
|
24161
|
+
*/
|
|
24162
|
+
breakBefore = input(...(ngDevMode ? [undefined, { debugName: "breakBefore" }] : []));
|
|
24163
|
+
/**
|
|
24164
|
+
* Determines how page, column, or region breaks behave after the element.
|
|
24165
|
+
* Uses the CSS `break-after` property values.
|
|
24166
|
+
*/
|
|
24167
|
+
breakAfter = input(...(ngDevMode ? [undefined, { debugName: "breakAfter" }] : []));
|
|
24168
|
+
/**
|
|
24169
|
+
* Determines how page, column, or region breaks behave inside the element.
|
|
24170
|
+
* Uses the CSS `break-inside` property values.
|
|
24171
|
+
*/
|
|
24172
|
+
breakInside = input(...(ngDevMode ? [undefined, { debugName: "breakInside" }] : []));
|
|
24173
|
+
classes = computed(() => {
|
|
24174
|
+
const visibility = this.tediPrint();
|
|
24175
|
+
const breakBefore = this.breakBefore();
|
|
24176
|
+
const breakAfter = this.breakAfter();
|
|
24177
|
+
const breakInside = this.breakInside();
|
|
24178
|
+
return [
|
|
24179
|
+
visibility === "hide" && "no-print",
|
|
24180
|
+
visibility === "show" && "show-print",
|
|
24181
|
+
breakBefore && `break-before-${breakBefore}`,
|
|
24182
|
+
breakAfter && `break-after-${breakAfter}`,
|
|
24183
|
+
breakInside && `break-inside-${breakInside}`,
|
|
24184
|
+
].filter((className) => !!className);
|
|
24185
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
24186
|
+
constructor() {
|
|
24187
|
+
/** Classes this directive added itself and is therefore allowed to remove. */
|
|
24188
|
+
let owned = [];
|
|
24189
|
+
/**
|
|
24190
|
+
* Classes are synced through Renderer2 rather than host bindings so the
|
|
24191
|
+
* directive never fights the element's own classes. A host binding takes
|
|
24192
|
+
* precedence over a component's `[class]` binding and would strip classes
|
|
24193
|
+
* that component set — e.g. the `no-print` that buttons apply to
|
|
24194
|
+
* themselves. Here a class that is already on the element is left alone:
|
|
24195
|
+
* the directive only removes what it added.
|
|
24196
|
+
*/
|
|
24197
|
+
afterRenderEffect(() => {
|
|
24198
|
+
const next = this.classes();
|
|
24199
|
+
const element = this.elementRef.nativeElement;
|
|
24200
|
+
for (const className of owned) {
|
|
24201
|
+
if (!next.includes(className)) {
|
|
24202
|
+
this.renderer.removeClass(element, className);
|
|
24203
|
+
}
|
|
24204
|
+
}
|
|
24205
|
+
owned = next.filter((className) => {
|
|
24206
|
+
if (element.classList.contains(className)) {
|
|
24207
|
+
return owned.includes(className);
|
|
24208
|
+
}
|
|
24209
|
+
this.renderer.addClass(element, className);
|
|
24210
|
+
return true;
|
|
24211
|
+
});
|
|
24212
|
+
});
|
|
24213
|
+
}
|
|
24214
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
24215
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PrintDirective, isStandalone: true, selector: "[tediPrint]", inputs: { tediPrint: { classPropertyName: "tediPrint", publicName: "tediPrint", isSignal: true, isRequired: false, transformFunction: null }, breakBefore: { classPropertyName: "breakBefore", publicName: "breakBefore", isSignal: true, isRequired: false, transformFunction: null }, breakAfter: { classPropertyName: "breakAfter", publicName: "breakAfter", isSignal: true, isRequired: false, transformFunction: null }, breakInside: { classPropertyName: "breakInside", publicName: "breakInside", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
24216
|
+
}
|
|
24217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PrintDirective, decorators: [{
|
|
24218
|
+
type: Directive,
|
|
24219
|
+
args: [{
|
|
24220
|
+
selector: "[tediPrint]",
|
|
24221
|
+
standalone: true,
|
|
24222
|
+
}]
|
|
24223
|
+
}], ctorParameters: () => [], propDecorators: { tediPrint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tediPrint", required: false }] }], breakBefore: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakBefore", required: false }] }], breakAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakAfter", required: false }] }], breakInside: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakInside", required: false }] }] } });
|
|
24224
|
+
|
|
23594
24225
|
class VerticalSpacingItemDirective {
|
|
23595
24226
|
el = inject(ElementRef);
|
|
23596
24227
|
renderer = inject(Renderer2);
|
|
@@ -23648,5 +24279,5 @@ function provideTedi(config = {}) {
|
|
|
23648
24279
|
* Generated bundle index. Do not edit.
|
|
23649
24280
|
*/
|
|
23650
24281
|
|
|
23651
|
-
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FloatingButtonComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TableOfContentsCollapsibleComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsItemSuffixDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination, warnDeprecated };
|
|
24282
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FloatingButtonComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, PrintDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TableOfContentsCollapsibleComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsItemSuffixDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination, warnDeprecated };
|
|
23652
24283
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|