@tedi-design-system/angular 9.1.0-rc.2 → 10.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/README.md +134 -0
- package/community/index.d.ts +26 -0
- package/community/index.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +32 -2
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +189 -186
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/index-without-icons.css +1 -1
- package/index.css +1 -1
- package/package.json +2 -2
- package/tedi/index.d.ts +119 -42
- 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, numberAttribute, viewChild, viewChildren, untracked, afterNextRender, NgZone, linkedSignal, ErrorHandler, Optional, SkipSelf, HostAttributeToken, ViewChild, HostBinding,
|
|
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, runInInjectionContext, ViewChild, HostBinding, 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';
|
|
@@ -1293,7 +1293,7 @@ class DropdownContentComponent {
|
|
|
1293
1293
|
provide: DROPDOWN_CONTENT_API,
|
|
1294
1294
|
useExisting: forwardRef(() => DropdownContentComponent),
|
|
1295
1295
|
},
|
|
1296
|
-
], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul\n class=\"tedi-dropdown-content__list\"\n [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n [id]=\"containerId()\"\n [attr.role]=\"dropdownRole()\"\n [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1296
|
+
], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul\n class=\"tedi-dropdown-content__list\"\n [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n [id]=\"containerId()\"\n [attr.role]=\"dropdownRole()\"\n [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content .tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1297
1297
|
}
|
|
1298
1298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownContentComponent, decorators: [{
|
|
1299
1299
|
type: Component,
|
|
@@ -1305,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1305
1305
|
provide: DROPDOWN_CONTENT_API,
|
|
1306
1306
|
useExisting: forwardRef(() => DropdownContentComponent),
|
|
1307
1307
|
},
|
|
1308
|
-
], template: "<ng-content />\n<ul\n class=\"tedi-dropdown-content__list\"\n [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n [id]=\"containerId()\"\n [attr.role]=\"dropdownRole()\"\n [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"] }]
|
|
1308
|
+
], template: "<ng-content />\n<ul\n class=\"tedi-dropdown-content__list\"\n [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n [id]=\"containerId()\"\n [attr.role]=\"dropdownRole()\"\n [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content .tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"] }]
|
|
1309
1309
|
}], propDecorators: { dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownItemComponent), { isSignal: true }] }] } });
|
|
1310
1310
|
|
|
1311
1311
|
/**
|
|
@@ -2490,23 +2490,32 @@ const translationsMap = {
|
|
|
2490
2490
|
ru: (isSelected) => isSelected ? "Отменить выбор строки" : "Выбрать ряд",
|
|
2491
2491
|
},
|
|
2492
2492
|
"table.sort": {
|
|
2493
|
-
description: "
|
|
2493
|
+
description: "Accessible label for a column sort button. Receives the current sort direction and, optionally, the column label so screen readers announce which column is sorted.",
|
|
2494
2494
|
components: ["Table"],
|
|
2495
|
-
et: (direction) =>
|
|
2496
|
-
?
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2495
|
+
et: (direction, columnLabel) => {
|
|
2496
|
+
const col = columnLabel ? ` veergu ${columnLabel}` : "";
|
|
2497
|
+
if (direction === "asc")
|
|
2498
|
+
return `Sorteeri${col} kahanevalt`;
|
|
2499
|
+
if (direction === "desc")
|
|
2500
|
+
return `Eemalda${col} sorteerimine`;
|
|
2501
|
+
return `Sorteeri${col} kasvavalt`;
|
|
2502
|
+
},
|
|
2503
|
+
en: (direction, columnLabel) => {
|
|
2504
|
+
const by = columnLabel ? ` by ${columnLabel}` : "";
|
|
2505
|
+
if (direction === "asc")
|
|
2506
|
+
return `Sort${by} descending`;
|
|
2507
|
+
if (direction === "desc")
|
|
2508
|
+
return `Remove sorting${by}`;
|
|
2509
|
+
return `Sort${by} ascending`;
|
|
2510
|
+
},
|
|
2511
|
+
ru: (direction, columnLabel) => {
|
|
2512
|
+
const col = columnLabel ? ` по столбцу ${columnLabel}` : "";
|
|
2513
|
+
if (direction === "asc")
|
|
2514
|
+
return `Сортировать${col} по убыванию`;
|
|
2515
|
+
if (direction === "desc")
|
|
2516
|
+
return `Отменить сортировку${col}`;
|
|
2517
|
+
return `Сортировать${col} по возрастанию`;
|
|
2518
|
+
},
|
|
2510
2519
|
},
|
|
2511
2520
|
"table.no-data": {
|
|
2512
2521
|
description: "Default placeholder when table data is empty",
|
|
@@ -2546,10 +2555,17 @@ const translationsMap = {
|
|
|
2546
2555
|
"table.filter-clear": {
|
|
2547
2556
|
description: "Clear action in the built-in column filter popover footer",
|
|
2548
2557
|
components: ["Table"],
|
|
2549
|
-
et: "
|
|
2558
|
+
et: "Tühjenda",
|
|
2550
2559
|
en: "Clear",
|
|
2551
2560
|
ru: "Сбросить",
|
|
2552
2561
|
},
|
|
2562
|
+
"table.filter-cancel": {
|
|
2563
|
+
description: "Cancel action in the built-in column filter popover footer: closes without changing the filter",
|
|
2564
|
+
components: ["Table"],
|
|
2565
|
+
et: "Tühista",
|
|
2566
|
+
en: "Cancel",
|
|
2567
|
+
ru: "Отмена",
|
|
2568
|
+
},
|
|
2553
2569
|
"table.filter-button-aria": {
|
|
2554
2570
|
description: "Accessible label of the built-in column filter trigger button",
|
|
2555
2571
|
components: ["Table"],
|
|
@@ -3849,7 +3865,7 @@ class ClosingButtonComponent {
|
|
|
3849
3865
|
translationService = inject(TediTranslationService);
|
|
3850
3866
|
_defaultLabel = this.translationService.track("close");
|
|
3851
3867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
3868
|
+
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\n [name]=\"icon()\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n aria-hidden=\"true\"\n/>\n", styles: [".tedi-closing-button{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;color:var(--button-close-text-default);cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color,color}.tedi-closing-button:hover{color:var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{color: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 });
|
|
3853
3869
|
}
|
|
3854
3870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, decorators: [{
|
|
3855
3871
|
type: Component,
|
|
@@ -3859,7 +3875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
3859
3875
|
class: "no-print",
|
|
3860
3876
|
"[class.tedi-closing-button]": "true",
|
|
3861
3877
|
"[class.tedi-closing-button--small]": "size() === 'small'",
|
|
3862
|
-
}, template: "<tedi-icon
|
|
3878
|
+
}, template: "<tedi-icon\n [name]=\"icon()\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n aria-hidden=\"true\"\n/>\n", styles: [".tedi-closing-button{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;color:var(--button-close-text-default);cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color,color}.tedi-closing-button:hover{color:var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{color: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"] }]
|
|
3863
3879
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }] } });
|
|
3864
3880
|
|
|
3865
3881
|
class AlertComponent {
|
|
@@ -5023,7 +5039,7 @@ class AccordionItemContentComponent {
|
|
|
5023
5039
|
contentId = this.item.contentId;
|
|
5024
5040
|
expanded = this.item.expanded;
|
|
5025
5041
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5026
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true", "class.tedi-accordion-item-content--with-icon-card": "item.showIconCard()", "class": "contentClass() ?? ''", "id": "contentId", "attr.role": "expanded() ? 'region' : null", "attr.aria-labelledby": "headerId", "attr.aria-hidden": "!expanded()", "attr.inert": "!expanded() ? '' : null" } }, ngImport: i0, template: "<div class=\"tedi-accordion-item-content__inner\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true", "class.tedi-accordion-item-content--with-icon-card": "item.showIconCard()", "class": "contentClass() ?? ''", "id": "contentId", "attr.role": "expanded() ? 'region' : null", "attr.aria-labelledby": "headerId", "attr.aria-hidden": "!expanded()", "attr.inert": "!expanded() ? '' : null" } }, ngImport: i0, template: "<div class=\"tedi-accordion-item-content__inner\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{position:relative;grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5027
5043
|
}
|
|
5028
5044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
|
|
5029
5045
|
type: Component,
|
|
@@ -5036,7 +5052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
5036
5052
|
"[attr.aria-labelledby]": "headerId",
|
|
5037
5053
|
"[attr.aria-hidden]": "!expanded()",
|
|
5038
5054
|
"[attr.inert]": "!expanded() ? '' : null",
|
|
5039
|
-
}, template: "<div class=\"tedi-accordion-item-content__inner\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"] }]
|
|
5055
|
+
}, template: "<div class=\"tedi-accordion-item-content__inner\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{position:relative;grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"] }]
|
|
5040
5056
|
}], propDecorators: { contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] } });
|
|
5041
5057
|
|
|
5042
5058
|
function getCardBorderPlacementColor(border) {
|
|
@@ -5474,11 +5490,11 @@ class CollapseComponent {
|
|
|
5474
5490
|
}
|
|
5475
5491
|
}
|
|
5476
5492
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
5493
|
+
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{position:relative;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 });
|
|
5478
5494
|
}
|
|
5479
5495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
5480
5496
|
type: Component,
|
|
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"] }]
|
|
5497
|
+
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{position:relative;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"] }]
|
|
5482
5498
|
}], 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 }] }] } });
|
|
5483
5499
|
|
|
5484
5500
|
/**
|
|
@@ -7308,11 +7324,11 @@ class CalendarDayGridComponent {
|
|
|
7308
7324
|
return new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
|
|
7309
7325
|
}
|
|
7310
7326
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", 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 }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__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);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{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);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;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-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", 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 }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__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);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{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);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;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-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}.tedi-calendar--full-width .tedi-calendar-day-grid{width:100%}.tedi-calendar--full-width .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid__row{grid-template-columns:repeat(7,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid__weekday,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number-header,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number,.tedi-calendar--full-width .tedi-calendar-day-grid__day{width:100%;height:auto;aspect-ratio:1}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7312
7328
|
}
|
|
7313
7329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
|
|
7314
7330
|
type: Component,
|
|
7315
|
-
args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__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);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{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);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;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-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"] }]
|
|
7331
|
+
args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__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);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{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);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;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-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}.tedi-calendar--full-width .tedi-calendar-day-grid{width:100%}.tedi-calendar--full-width .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid__row{grid-template-columns:repeat(7,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid__weekday,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number-header,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number,.tedi-calendar--full-width .tedi-calendar-day-grid__day{width:100%;height:auto;aspect-ratio:1}\n"] }]
|
|
7316
7332
|
}], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: true }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }, { type: i0.Output, args: ["hoveredDateChange"] }] } });
|
|
7317
7333
|
|
|
7318
7334
|
class CalendarMonthGridComponent {
|
|
@@ -7604,7 +7620,7 @@ class CalendarHeaderComponent {
|
|
|
7604
7620
|
return true;
|
|
7605
7621
|
}
|
|
7606
7622
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7607
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", 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 }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", 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 }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:center}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding:0 0 0 var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7608
7624
|
}
|
|
7609
7625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
7610
7626
|
type: Component,
|
|
@@ -7615,7 +7631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
7615
7631
|
DropdownTriggerDirective,
|
|
7616
7632
|
DropdownContentComponent,
|
|
7617
7633
|
DropdownItemComponent,
|
|
7618
|
-
], template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:
|
|
7634
|
+
], template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:center}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding:0 0 0 var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"] }]
|
|
7619
7635
|
}], propDecorators: { currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: true }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], isMonthDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMonthDisabled", required: false }] }], isYearDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isYearDisabled", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], yearPageStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageStart", required: false }] }], yearPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageSize", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], yearChange: [{ type: i0.Output, args: ["yearChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
|
|
7620
7636
|
|
|
7621
7637
|
const YEAR_PAGE_SIZE = 12;
|
|
@@ -7666,6 +7682,11 @@ class CalendarComponent {
|
|
|
7666
7682
|
* DateField overlay).
|
|
7667
7683
|
*/
|
|
7668
7684
|
bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
|
|
7685
|
+
/**
|
|
7686
|
+
* Grow to fill the container's width instead of a fixed width; cells keep a
|
|
7687
|
+
* square aspect ratio. Wrap in a sized container to control the scale.
|
|
7688
|
+
*/
|
|
7689
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
7669
7690
|
/**
|
|
7670
7691
|
* Matchers that mark dates as disabled. Each matcher can be a `Date`, `Date[]`,
|
|
7671
7692
|
* `{ before }`, `{ after }`, `{ before, after }`, `{ from, to? }`,
|
|
@@ -7762,12 +7783,13 @@ class CalendarComponent {
|
|
|
7762
7783
|
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
7763
7784
|
});
|
|
7764
7785
|
// Re-measure after every render that changes the month count, the
|
|
7765
|
-
// week-number column, the
|
|
7766
|
-
// custom property imperatively (not via a
|
|
7767
|
-
// never re-triggers change detection.
|
|
7786
|
+
// week-number column, the full-width layout, the active view, or the
|
|
7787
|
+
// viewport. We write the CSS custom property imperatively (not via a
|
|
7788
|
+
// template binding) so updating it never re-triggers change detection.
|
|
7768
7789
|
afterRenderEffect(() => {
|
|
7769
7790
|
this.numberOfMonths();
|
|
7770
7791
|
this.showWeekNumbers();
|
|
7792
|
+
this.fullWidth();
|
|
7771
7793
|
this.view();
|
|
7772
7794
|
this.viewportWidth();
|
|
7773
7795
|
this.updateFitColumns();
|
|
@@ -8196,13 +8218,13 @@ class CalendarComponent {
|
|
|
8196
8218
|
return value.from instanceof Date ? value.from : null;
|
|
8197
8219
|
}
|
|
8198
8220
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarComponent, isStandalone: true, selector: "tedi-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", 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 }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", 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 }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", 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 }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", 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 } }, outputs: { view: "viewChange", currentMonth: "currentMonthChange", value: "valueChange", select: "select" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.tedi-calendar--disabled": "effectiveDisabled()", "class.tedi-calendar--multi-month": "numberOfMonths() > 1", "class.tedi-calendar--with-week-numbers": "showWeekNumbers()", "class.tedi-calendar--bordered": "bordered()", "style.--_tedi-calendar-month-count": "numberOfMonths()" }, classAttribute: "tedi-calendar" }, providers: [
|
|
8221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarComponent, isStandalone: true, selector: "tedi-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", 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 }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", 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 }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", 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 }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", 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 } }, outputs: { view: "viewChange", currentMonth: "currentMonthChange", value: "valueChange", select: "select" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.tedi-calendar--disabled": "effectiveDisabled()", "class.tedi-calendar--multi-month": "numberOfMonths() > 1", "class.tedi-calendar--with-week-numbers": "showWeekNumbers()", "class.tedi-calendar--bordered": "bordered()", "class.tedi-calendar--full-width": "fullWidth()", "style.--_tedi-calendar-month-count": "numberOfMonths()" }, classAttribute: "tedi-calendar" }, providers: [
|
|
8200
8222
|
{
|
|
8201
8223
|
provide: NG_VALUE_ACCESSOR,
|
|
8202
8224
|
useExisting: forwardRef(() => CalendarComponent),
|
|
8203
8225
|
multi: true,
|
|
8204
8226
|
},
|
|
8205
|
-
], ngImport: i0, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{display:flex;flex-direction:column;padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "tedi-calendar-header", inputs: ["currentMonth", "view", "localeCode", "showNavigation", "monthYearSelectType", "disabledMatchers", "isMonthDisabled", "isYearDisabled", "minYear", "maxYear", "yearPageStart", "yearPageSize", "numberOfMonths", "inputDisabled"], outputs: ["prevClick", "nextClick", "monthChange", "yearChange", "viewChange"] }, { kind: "component", type: CalendarDayGridComponent, selector: "tedi-calendar-day-grid", inputs: ["month", "mode", "value", "localeCode", "firstDayOfWeek", "showOutsideDays", "showWeekNumbers", "disabledMatchers", "availableDays", "unavailableDays", "inputDisabled", "dayStatus", "hoveredDate"], outputs: ["daySelect", "hoveredDateChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "tedi-calendar-month-grid", inputs: ["year", "selectedMonth", "localeCode", "monthNameFormat", "isMonthDisabled", "inputDisabled"], outputs: ["monthSelect"] }, { kind: "component", type: CalendarYearGridComponent, selector: "tedi-calendar-year-grid", inputs: ["pageStart", "pageSize", "selectedYear", "isYearDisabled", "inputDisabled"], outputs: ["yearSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8227
|
+
], ngImport: i0, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar--full-width{box-sizing:border-box;width:100%}.tedi-calendar--full-width .tedi-calendar__month{flex:1 1 var(--_tedi-calendar-month-width);min-width:min(100%,var(--_tedi-calendar-month-width));max-width:none}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--_tedi-calendar-month-width);padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "tedi-calendar-header", inputs: ["currentMonth", "view", "localeCode", "showNavigation", "monthYearSelectType", "disabledMatchers", "isMonthDisabled", "isYearDisabled", "minYear", "maxYear", "yearPageStart", "yearPageSize", "numberOfMonths", "inputDisabled"], outputs: ["prevClick", "nextClick", "monthChange", "yearChange", "viewChange"] }, { kind: "component", type: CalendarDayGridComponent, selector: "tedi-calendar-day-grid", inputs: ["month", "mode", "value", "localeCode", "firstDayOfWeek", "showOutsideDays", "showWeekNumbers", "disabledMatchers", "availableDays", "unavailableDays", "inputDisabled", "dayStatus", "hoveredDate"], outputs: ["daySelect", "hoveredDateChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "tedi-calendar-month-grid", inputs: ["year", "selectedMonth", "localeCode", "monthNameFormat", "isMonthDisabled", "inputDisabled"], outputs: ["monthSelect"] }, { kind: "component", type: CalendarYearGridComponent, selector: "tedi-calendar-year-grid", inputs: ["pageStart", "pageSize", "selectedYear", "isYearDisabled", "inputDisabled"], outputs: ["yearSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8206
8228
|
}
|
|
8207
8229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
8208
8230
|
type: Component,
|
|
@@ -8223,9 +8245,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
8223
8245
|
"[class.tedi-calendar--multi-month]": "numberOfMonths() > 1",
|
|
8224
8246
|
"[class.tedi-calendar--with-week-numbers]": "showWeekNumbers()",
|
|
8225
8247
|
"[class.tedi-calendar--bordered]": "bordered()",
|
|
8248
|
+
"[class.tedi-calendar--full-width]": "fullWidth()",
|
|
8226
8249
|
"[style.--_tedi-calendar-month-count]": "numberOfMonths()",
|
|
8227
|
-
}, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{display:flex;flex-direction:column;padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"] }]
|
|
8228
|
-
}], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: false }] }, { type: i0.Output, args: ["currentMonthChange"] }], 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 }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", 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 }] }], select: [{ type: i0.Output, args: ["select"] }], handleKeydown: [{
|
|
8250
|
+
}, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar--full-width{box-sizing:border-box;width:100%}.tedi-calendar--full-width .tedi-calendar__month{flex:1 1 var(--_tedi-calendar-month-width);min-width:min(100%,var(--_tedi-calendar-month-width));max-width:none}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--_tedi-calendar-month-width);padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"] }]
|
|
8251
|
+
}], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: false }] }, { type: i0.Output, args: ["currentMonthChange"] }], 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 }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", 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 }] }], select: [{ type: i0.Output, args: ["select"] }], handleKeydown: [{
|
|
8229
8252
|
type: HostListener,
|
|
8230
8253
|
args: ["keydown", ["$event"]]
|
|
8231
8254
|
}] } });
|
|
@@ -8726,20 +8749,23 @@ class FeedbackTextComponent {
|
|
|
8726
8749
|
* @default left
|
|
8727
8750
|
*/
|
|
8728
8751
|
position = input("left", ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
8752
|
+
// Callers forwarding optional values can pass undefined; keep the defaults
|
|
8753
|
+
resolvedType = computed(() => this.type() ?? "hint", ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
|
|
8754
|
+
resolvedPosition = computed(() => this.position() ?? "left", ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : []));
|
|
8729
8755
|
role = computed(() => {
|
|
8730
|
-
if (this.
|
|
8756
|
+
if (this.resolvedType() === "valid" || this.resolvedType() === "error") {
|
|
8731
8757
|
return "alert";
|
|
8732
8758
|
}
|
|
8733
8759
|
return undefined;
|
|
8734
8760
|
}, ...(ngDevMode ? [{ debugName: "role" }] : []));
|
|
8735
8761
|
ariaLive = computed(() => {
|
|
8736
|
-
if (this.
|
|
8762
|
+
if (this.resolvedType() === "error" || this.resolvedType() === "valid") {
|
|
8737
8763
|
return "assertive";
|
|
8738
8764
|
}
|
|
8739
8765
|
return "polite";
|
|
8740
8766
|
}, ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
|
|
8741
8767
|
classes = computed(() => {
|
|
8742
|
-
return `tedi-feedback-text tedi-feedback-text--${this.
|
|
8768
|
+
return `tedi-feedback-text tedi-feedback-text--${this.resolvedType()} tedi-feedback-text--${this.resolvedPosition()}`;
|
|
8743
8769
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
8744
8770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FeedbackTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8745
8771
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FeedbackTextComponent, isStandalone: true, selector: "tedi-feedback-text", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "elementId()", "attr.role": "role()", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -10368,7 +10394,7 @@ class SelectComponent {
|
|
|
10368
10394
|
useExisting: forwardRef(() => SelectComponent),
|
|
10369
10395
|
multi: true,
|
|
10370
10396
|
},
|
|
10371
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <tedi-label-row>\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\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\n<ng-template #singleValue>\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (attach)=\"onOverlayAttached()\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_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);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer;outline:none}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: 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: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: OptionContentComponent, selector: "tedi-option-content", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: OptionContentLabelComponent, selector: "tedi-option-content-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10397
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <tedi-label-row>\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\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\n<ng-template #singleValue>\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (attach)=\"onOverlayAttached()\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_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);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer;outline:none}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: 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: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: OptionContentComponent, selector: "tedi-option-content", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: OptionContentLabelComponent, selector: "tedi-option-content-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10372
10398
|
}
|
|
10373
10399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
10374
10400
|
type: Component,
|
|
@@ -10399,7 +10425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10399
10425
|
useExisting: forwardRef(() => SelectComponent),
|
|
10400
10426
|
multi: true,
|
|
10401
10427
|
},
|
|
10402
|
-
], template: "@if (label()) {\n <tedi-label-row>\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\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\n<ng-template #singleValue>\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (attach)=\"onOverlayAttached()\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_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);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer;outline:none}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
|
|
10428
|
+
], template: "@if (label()) {\n <tedi-label-row>\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"!searchable() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\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\n<ng-template #singleValue>\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (attach)=\"onOverlayAttached()\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_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);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_field-border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer;outline:none}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--body-regular-line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1 1 var(--_search-input-reserve);width:auto;min-width:0;height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
|
|
10403
10429
|
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showClearOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearOnInteraction", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], dropdownAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAlign", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], disabledKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKey", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], maxDropdownHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDropdownHeight", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownType", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], cdkListboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], virtualListboxRef: [{ type: i0.ViewChild, args: ["virtualListbox", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ["trigger", { ...{ read: ElementRef }, isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], multiselectContainerRef: [{ type: i0.ViewChild, args: ["multiselectContainer", { isSignal: true }] }], tagRefs: [{ type: i0.ViewChildren, args: ["tagElement", { ...{ read: ElementRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValueTemplateDirective), { isSignal: true }] }], tooltipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTooltipTemplateDirective), { isSignal: true }] }], onWindowResize: [{
|
|
10404
10430
|
type: HostListener,
|
|
10405
10431
|
args: ["window:resize"]
|
|
@@ -12681,7 +12707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
12681
12707
|
* Renders a column filter inside a modal — the below-`filterModalBreakpoint`
|
|
12682
12708
|
* alternative to the desktop filter popover. Opened by the table via
|
|
12683
12709
|
* `ModalService.open()`; reads its payload from `MODAL_DATA` and reuses the
|
|
12684
|
-
* same filter context (draft, apply, clear) so behavior matches the popover.
|
|
12710
|
+
* same filter context (draft, apply, clear, cancel) so behavior matches the popover.
|
|
12685
12711
|
*/
|
|
12686
12712
|
class TableFilterModalComponent {
|
|
12687
12713
|
data = inject(MODAL_DATA);
|
|
@@ -12690,7 +12716,7 @@ class TableFilterModalComponent {
|
|
|
12690
12716
|
return this.data.buildContext(() => this.modalRef.close());
|
|
12691
12717
|
}
|
|
12692
12718
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
12719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableFilterModalComponent, isStandalone: true, selector: "tedi-table-filter-modal", ngImport: i0, template: "<tedi-modal>\n <tedi-modal-header>\n <h2>{{ data.columnLabel }}</h2>\n </tedi-modal-header>\n <tedi-modal-content>\n <ng-container *ngTemplateOutlet=\"data.template; context: context\" />\n </tedi-modal-content>\n @if (data.actions.length) {\n <tedi-modal-footer>\n @for (item of data.actions; track item.action) {\n <button\n tedi-button\n size=\"small\"\n type=\"button\"\n [variant]=\"item.action === 'apply' ? 'primary' : 'secondary'\"\n (click)=\"context[item.action]()\"\n >\n {{ item.label }}\n </button>\n }\n </tedi-modal-footer>\n }\n</tedi-modal>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12694
12720
|
}
|
|
12695
12721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableFilterModalComponent, decorators: [{
|
|
12696
12722
|
type: Component,
|
|
@@ -12701,7 +12727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
12701
12727
|
ModalContentComponent,
|
|
12702
12728
|
ModalFooterComponent,
|
|
12703
12729
|
ButtonComponent,
|
|
12704
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tedi-modal>\n <tedi-modal-header>\n <h2>{{ data.columnLabel }}</h2>\n </tedi-modal-header>\n <tedi-modal-content>\n <ng-container *ngTemplateOutlet=\"data.template; context: context\" />\n </tedi-modal-content>\n <tedi-modal-footer>\n
|
|
12730
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tedi-modal>\n <tedi-modal-header>\n <h2>{{ data.columnLabel }}</h2>\n </tedi-modal-header>\n <tedi-modal-content>\n <ng-container *ngTemplateOutlet=\"data.template; context: context\" />\n </tedi-modal-content>\n @if (data.actions.length) {\n <tedi-modal-footer>\n @for (item of data.actions; track item.action) {\n <button\n tedi-button\n size=\"small\"\n type=\"button\"\n [variant]=\"item.action === 'apply' ? 'primary' : 'secondary'\"\n (click)=\"context[item.action]()\"\n >\n {{ item.label }}\n </button>\n }\n </tedi-modal-footer>\n }\n</tedi-modal>\n" }]
|
|
12705
12731
|
}] });
|
|
12706
12732
|
|
|
12707
12733
|
const TEDI_TABLE_CONTEXT = new InjectionToken("TEDI_TABLE_CONTEXT");
|
|
@@ -13173,6 +13199,14 @@ class TediTableComponent {
|
|
|
13173
13199
|
* @default "small"
|
|
13174
13200
|
*/
|
|
13175
13201
|
filterPopoverWidth = input("small", ...(ngDevMode ? [{ debugName: "filterPopoverWidth" }] : []));
|
|
13202
|
+
/**
|
|
13203
|
+
* Footer buttons of the column filter popover and modal, in display order:
|
|
13204
|
+
* `"apply"` commits the draft, `"clear"` removes the filter, `"cancel"`
|
|
13205
|
+
* closes and keeps the applied filter. A single column can override it
|
|
13206
|
+
* through `filterable: { actions }`.
|
|
13207
|
+
* @default ["clear", "apply"]
|
|
13208
|
+
*/
|
|
13209
|
+
filterActions = input(["clear", "apply"], ...(ngDevMode ? [{ debugName: "filterActions" }] : []));
|
|
13176
13210
|
/**
|
|
13177
13211
|
* Enables pagination and configures the bottom paginator slot. This is also
|
|
13178
13212
|
* the source of truth for `pageSize` / `pageSizeOptions` — the top slot
|
|
@@ -13841,6 +13875,9 @@ class TediTableComponent {
|
|
|
13841
13875
|
this.table.resetColumnFilters(true);
|
|
13842
13876
|
}
|
|
13843
13877
|
handleRowClick(event, row) {
|
|
13878
|
+
// Clicks on rows that are neither interactive nor expand on click are ignored.
|
|
13879
|
+
if (!this.interactive() && !this.rowExpandsOnClick(row))
|
|
13880
|
+
return;
|
|
13844
13881
|
// Clicks that land on an interactive control inside a cell (checkbox,
|
|
13845
13882
|
// link, button, form field, …) must not also activate the row or toggle
|
|
13846
13883
|
// its expansion — so consumers don't need to add `stopPropagation` by hand.
|
|
@@ -14631,21 +14668,37 @@ class TediTableComponent {
|
|
|
14631
14668
|
isNumber(value) {
|
|
14632
14669
|
return typeof value === "number";
|
|
14633
14670
|
}
|
|
14671
|
+
/** True when the column sets `sortable: true` and TanStack can sort it. */
|
|
14672
|
+
hasBuiltInSort(column) {
|
|
14673
|
+
const def = column.columnDef;
|
|
14674
|
+
return def.sortable === true && column.getCanSort();
|
|
14675
|
+
}
|
|
14634
14676
|
/**
|
|
14635
|
-
*
|
|
14636
|
-
*
|
|
14637
|
-
* (`enableSorting !== false`), and the rendered header content is a plain
|
|
14638
|
-
* string / number. Custom header `TemplateRef`s and functions bow out of
|
|
14639
|
-
* the shorthand and render via `flexRender` as-is.
|
|
14677
|
+
* True for a sortable column with a plain string / number header: the title
|
|
14678
|
+
* itself becomes the sort button.
|
|
14640
14679
|
*/
|
|
14641
14680
|
shouldRenderSortableHeader(column, content) {
|
|
14642
|
-
|
|
14643
|
-
if (def.sortable !== true)
|
|
14644
|
-
return false;
|
|
14645
|
-
if (!column.getCanSort())
|
|
14681
|
+
if (!this.hasBuiltInSort(column))
|
|
14646
14682
|
return false;
|
|
14647
14683
|
return typeof content === "string" || typeof content === "number";
|
|
14648
14684
|
}
|
|
14685
|
+
/**
|
|
14686
|
+
* True for a sortable column with a custom header (template or component):
|
|
14687
|
+
* the header renders as-is and an icon-only sort button follows it.
|
|
14688
|
+
*/
|
|
14689
|
+
shouldRenderSortButtonAfterHeader(header) {
|
|
14690
|
+
if (!this.hasBuiltInSort(header.column))
|
|
14691
|
+
return false;
|
|
14692
|
+
const def = header.column.columnDef.header;
|
|
14693
|
+
const content = typeof def === "function"
|
|
14694
|
+
? runInInjectionContext(this.injector, () => def(header.getContext()))
|
|
14695
|
+
: def;
|
|
14696
|
+
return typeof content !== "string" && typeof content !== "number";
|
|
14697
|
+
}
|
|
14698
|
+
/** Accessible name of the icon-only sort button: next action + column. */
|
|
14699
|
+
sortAriaLabel(column) {
|
|
14700
|
+
return this.translation.translate("table.sort", column.getIsSorted(), this.resolveColumnLabel(column));
|
|
14701
|
+
}
|
|
14649
14702
|
/**
|
|
14650
14703
|
* Material icon name reflecting the column's current sort state.
|
|
14651
14704
|
* `asc → arrow_upward`, `desc → arrow_downward`, otherwise `unfold_more`.
|
|
@@ -14722,11 +14775,14 @@ class TediTableComponent {
|
|
|
14722
14775
|
const label = this.resolveColumnLabel(col);
|
|
14723
14776
|
return this.translation.translate("table.filter-button-aria", label);
|
|
14724
14777
|
}
|
|
14725
|
-
|
|
14726
|
-
|
|
14778
|
+
/** Footer buttons for the column's filter: the column's own `actions`, or
|
|
14779
|
+
* the table's `filterActions`. Repeated entries are dropped. */
|
|
14780
|
+
filterActionsFor(col) {
|
|
14781
|
+
const actions = this.resolveFilterOptions(col)?.actions ?? this.filterActions();
|
|
14782
|
+
return [...new Set(actions)];
|
|
14727
14783
|
}
|
|
14728
|
-
|
|
14729
|
-
return this.translation.translate(
|
|
14784
|
+
filterActionLabel(action) {
|
|
14785
|
+
return this.translation.translate(`table.filter-${action}`);
|
|
14730
14786
|
}
|
|
14731
14787
|
getFilterDraft(columnId, initial) {
|
|
14732
14788
|
let s = this.filterDrafts.get(columnId);
|
|
@@ -14799,15 +14855,15 @@ class TediTableComponent {
|
|
|
14799
14855
|
* Builds the per-column context object handed to the consumer's
|
|
14800
14856
|
* `filterTemplate`. `$implicit` is wired to the context itself so
|
|
14801
14857
|
* `<ng-template let-ctx>` resolves `ctx.value`, `ctx.setValue`,
|
|
14802
|
-
* `ctx.apply()`, `ctx.clear()` and `ctx.column` without extra `let-*`
|
|
14858
|
+
* `ctx.apply()`, `ctx.clear()`, `ctx.cancel()` and `ctx.column` without extra `let-*`
|
|
14803
14859
|
* destructuring.
|
|
14804
14860
|
*/
|
|
14805
14861
|
filterContextFor(col, popover) {
|
|
14806
14862
|
return this.buildFilterContext(col, () => popover.hidePopover(true));
|
|
14807
14863
|
}
|
|
14808
14864
|
/**
|
|
14809
|
-
* Builds the filter context, wiring `apply` / `clear`
|
|
14810
|
-
* then run `close` (hide the popover, or close the modal — whichever opened
|
|
14865
|
+
* Builds the filter context, wiring `apply` / `clear` / `cancel` to update
|
|
14866
|
+
* the draft and the applied filter and then run `close` (hide the popover, or close the modal — whichever opened
|
|
14811
14867
|
* the filter). Shared by the popover and the modal renderers.
|
|
14812
14868
|
*/
|
|
14813
14869
|
buildFilterContext(col, close) {
|
|
@@ -14824,6 +14880,10 @@ class TediTableComponent {
|
|
|
14824
14880
|
col.setFilterValue(undefined);
|
|
14825
14881
|
close();
|
|
14826
14882
|
},
|
|
14883
|
+
cancel: () => {
|
|
14884
|
+
draft.set(col.getFilterValue());
|
|
14885
|
+
close();
|
|
14886
|
+
},
|
|
14827
14887
|
column: col,
|
|
14828
14888
|
};
|
|
14829
14889
|
ctx.$implicit =
|
|
@@ -14859,22 +14919,17 @@ class TediTableComponent {
|
|
|
14859
14919
|
ariaLabel: this.filterAriaLabel(col),
|
|
14860
14920
|
data: {
|
|
14861
14921
|
columnLabel: this.resolveColumnLabel(col),
|
|
14862
|
-
|
|
14863
|
-
|
|
14922
|
+
actions: this.filterActionsFor(col).map((action) => ({
|
|
14923
|
+
action,
|
|
14924
|
+
label: this.filterActionLabel(action),
|
|
14925
|
+
})),
|
|
14864
14926
|
template: tpl,
|
|
14865
14927
|
buildContext: (close) => this.buildFilterContext(col, close),
|
|
14866
14928
|
},
|
|
14867
14929
|
});
|
|
14868
14930
|
}
|
|
14869
|
-
|
|
14870
|
-
|
|
14871
|
-
col.setFilterValue(draft());
|
|
14872
|
-
popover.hidePopover(true);
|
|
14873
|
-
}
|
|
14874
|
-
handleFilterClear(col, popover) {
|
|
14875
|
-
this.getFilterDraft(col.id, col.getFilterValue()).set(undefined);
|
|
14876
|
-
col.setFilterValue(undefined);
|
|
14877
|
-
popover.hidePopover(true);
|
|
14931
|
+
handleFilterAction(action, col, popover) {
|
|
14932
|
+
this.filterContextFor(col, popover)[action]();
|
|
14878
14933
|
}
|
|
14879
14934
|
/**
|
|
14880
14935
|
* Resolve `rowSpan` for a body cell.
|
|
@@ -14899,13 +14954,13 @@ class TediTableComponent {
|
|
|
14899
14954
|
return value;
|
|
14900
14955
|
}
|
|
14901
14956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14902
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyLastColumn: { classPropertyName: "stickyLastColumn", publicName: "stickyLastColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupDividers: { classPropertyName: "rowGroupDividers", publicName: "rowGroupDividers", isSignal: true, isRequired: false, transformFunction: null }, controlColumnOrder: { classPropertyName: "controlColumnOrder", publicName: "controlColumnOrder", isSignal: true, isRequired: false, transformFunction: null }, filterModalBreakpoint: { classPropertyName: "filterModalBreakpoint", publicName: "filterModalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, filterModalFullscreen: { classPropertyName: "filterModalFullscreen", publicName: "filterModalFullscreen", isSignal: true, isRequired: false, transformFunction: null }, filterPopoverWidth: { classPropertyName: "filterPopoverWidth", publicName: "filterPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
|
|
14957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyLastColumn: { classPropertyName: "stickyLastColumn", publicName: "stickyLastColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupDividers: { classPropertyName: "rowGroupDividers", publicName: "rowGroupDividers", isSignal: true, isRequired: false, transformFunction: null }, controlColumnOrder: { classPropertyName: "controlColumnOrder", publicName: "controlColumnOrder", isSignal: true, isRequired: false, transformFunction: null }, filterModalBreakpoint: { classPropertyName: "filterModalBreakpoint", publicName: "filterModalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, filterModalFullscreen: { classPropertyName: "filterModalFullscreen", publicName: "filterModalFullscreen", isSignal: true, isRequired: false, transformFunction: null }, filterPopoverWidth: { classPropertyName: "filterPopoverWidth", publicName: "filterPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, filterActions: { classPropertyName: "filterActions", publicName: "filterActions", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
|
|
14903
14958
|
{
|
|
14904
14959
|
provide: TEDI_TABLE_CONTEXT,
|
|
14905
14960
|
useFactory: (component) => component.contextValue,
|
|
14906
14961
|
deps: [TediTableComponent],
|
|
14907
14962
|
},
|
|
14908
|
-
], 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=\"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=\"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 <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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__cell--sub-component>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>.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)}\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", "padding"] }, { 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 });
|
|
14963
|
+
], 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=\"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=\"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 (shouldRenderSortButtonAfterHeader(header)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n [aria-label]=\"sortAriaLabel(header.column)\"\n (click)=\"handleSortToggle(header.column)\"\n ></button>\n }\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 @let filterActions =\n filterActionsFor(header.column);\n @if (filterActions.length) {\n <div class=\"tedi-table__filter-actions\">\n @for (action of filterActions; track action) {\n <button\n tedi-button\n size=\"small\"\n type=\"button\"\n [variant]=\"\n action === 'apply'\n ? 'primary'\n : 'secondary'\n \"\n (click)=\"\n handleFilterAction(\n action,\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterActionLabel(action) }}\n </button>\n }\n </div>\n }\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)=\"handleRowClick($event, row)\"\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 <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{position:relative;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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>.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)}\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", "padding"] }, { 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 });
|
|
14909
14964
|
}
|
|
14910
14965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
14911
14966
|
type: Component,
|
|
@@ -14939,8 +14994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
14939
14994
|
useFactory: (component) => component.contextValue,
|
|
14940
14995
|
deps: [TediTableComponent],
|
|
14941
14996
|
},
|
|
14942
|
-
], 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=\"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=\"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 <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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__cell--sub-component>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>.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)}\n"] }]
|
|
14943
|
-
}], 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 }] }] } });
|
|
14997
|
+
], 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=\"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=\"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 (shouldRenderSortButtonAfterHeader(header)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n [aria-label]=\"sortAriaLabel(header.column)\"\n (click)=\"handleSortToggle(header.column)\"\n ></button>\n }\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 @let filterActions =\n filterActionsFor(header.column);\n @if (filterActions.length) {\n <div class=\"tedi-table__filter-actions\">\n @for (action of filterActions; track action) {\n <button\n tedi-button\n size=\"small\"\n type=\"button\"\n [variant]=\"\n action === 'apply'\n ? 'primary'\n : 'secondary'\n \"\n (click)=\"\n handleFilterAction(\n action,\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterActionLabel(action) }}\n </button>\n }\n </div>\n }\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)=\"handleRowClick($event, row)\"\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 <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{position:relative;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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.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>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.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>:where(.tedi-table__table)>.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>:where(.tedi-table__scroll)>.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)}\n"] }]
|
|
14998
|
+
}], 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 }] }], filterActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActions", 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 }] }] } });
|
|
14944
14999
|
|
|
14945
15000
|
class TediTableToolbarComponent {
|
|
14946
15001
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -16112,51 +16167,7 @@ class DateFieldModalComponent {
|
|
|
16112
16167
|
this.confirm();
|
|
16113
16168
|
}
|
|
16114
16169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: DateFieldModalComponent, isStandalone: true, selector: "tedi-date-field-modal", ngImport: i0, template:
|
|
16116
|
-
<tedi-modal class="tedi-date-field-modal">
|
|
16117
|
-
<tedi-modal-header>
|
|
16118
|
-
<h2>{{ "date-field.modal-title" | tediTranslate }}</h2>
|
|
16119
|
-
</tedi-modal-header>
|
|
16120
|
-
<tedi-modal-content class="tedi-date-field-modal__content">
|
|
16121
|
-
<tedi-calendar
|
|
16122
|
-
[bordered]="false"
|
|
16123
|
-
[value]="draft()"
|
|
16124
|
-
[currentMonth]="month()"
|
|
16125
|
-
[mode]="data.mode"
|
|
16126
|
-
[selectionLevel]="data.selectionLevel"
|
|
16127
|
-
[localeCode]="data.localeCode"
|
|
16128
|
-
[showOutsideDays]="data.showOutsideDays"
|
|
16129
|
-
[showWeekNumbers]="data.showWeekNumbers"
|
|
16130
|
-
[numberOfMonths]="data.numberOfMonths"
|
|
16131
|
-
[monthYearSelectType]="data.monthYearSelectType"
|
|
16132
|
-
[required]="data.required"
|
|
16133
|
-
[disabledMatchers]="data.disabledMatchers"
|
|
16134
|
-
[availableDays]="data.availableDays"
|
|
16135
|
-
[unavailableDays]="data.unavailableDays"
|
|
16136
|
-
[shouldDisableMonth]="data.shouldDisableMonth"
|
|
16137
|
-
[shouldDisableYear]="data.shouldDisableYear"
|
|
16138
|
-
[minYear]="data.minYear"
|
|
16139
|
-
[maxYear]="data.maxYear"
|
|
16140
|
-
(valueChange)="draft.set($event)"
|
|
16141
|
-
(currentMonthChange)="month.set($event)"
|
|
16142
|
-
(select)="handleSelect()"
|
|
16143
|
-
/>
|
|
16144
|
-
</tedi-modal-content>
|
|
16145
|
-
<tedi-modal-footer>
|
|
16146
|
-
<button
|
|
16147
|
-
tedi-button
|
|
16148
|
-
type="button"
|
|
16149
|
-
variant="secondary"
|
|
16150
|
-
(click)="cancel()"
|
|
16151
|
-
>
|
|
16152
|
-
{{ "date-field.cancel" | tediTranslate }}
|
|
16153
|
-
</button>
|
|
16154
|
-
<button tedi-button type="button" (click)="confirm()">
|
|
16155
|
-
{{ "date-field.confirm" | tediTranslate }}
|
|
16156
|
-
</button>
|
|
16157
|
-
</tedi-modal-footer>
|
|
16158
|
-
</tedi-modal>
|
|
16159
|
-
`, isInline: true, styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: DateFieldModalComponent, isStandalone: true, selector: "tedi-date-field-modal", ngImport: i0, template: "<tedi-modal\n class=\"tedi-date-field-modal\"\n [class.tedi-date-field-modal--full-width]=\"data.calendarFullWidth\"\n>\n <tedi-modal-header>\n <h2>{{ \"date-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-date-field-modal__content\">\n <tedi-calendar\n [bordered]=\"false\"\n [value]=\"draft()\"\n [currentMonth]=\"month()\"\n [mode]=\"data.mode\"\n [selectionLevel]=\"data.selectionLevel\"\n [localeCode]=\"data.localeCode\"\n [showOutsideDays]=\"data.showOutsideDays\"\n [showWeekNumbers]=\"data.showWeekNumbers\"\n [numberOfMonths]=\"data.numberOfMonths\"\n [fullWidth]=\"data.calendarFullWidth\"\n [monthYearSelectType]=\"data.monthYearSelectType\"\n [required]=\"data.required\"\n [disabledMatchers]=\"data.disabledMatchers\"\n [availableDays]=\"data.availableDays\"\n [unavailableDays]=\"data.unavailableDays\"\n [shouldDisableMonth]=\"data.shouldDisableMonth\"\n [shouldDisableYear]=\"data.shouldDisableYear\"\n [minYear]=\"data.minYear\"\n [maxYear]=\"data.maxYear\"\n (valueChange)=\"draft.set($event)\"\n (currentMonthChange)=\"month.set($event)\"\n (select)=\"handleSelect()\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"date-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"button\" (click)=\"confirm()\">\n {{ \"date-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n</tedi-modal>\n", styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}.tedi-date-field-modal--full-width .tedi-date-field-modal__content{align-items:stretch;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "fullWidth", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16160
16171
|
}
|
|
16161
16172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldModalComponent, decorators: [{
|
|
16162
16173
|
type: Component,
|
|
@@ -16168,51 +16179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16168
16179
|
ModalFooterComponent,
|
|
16169
16180
|
ModalHeaderComponent,
|
|
16170
16181
|
TediTranslationPipe,
|
|
16171
|
-
], template:
|
|
16172
|
-
<tedi-modal class="tedi-date-field-modal">
|
|
16173
|
-
<tedi-modal-header>
|
|
16174
|
-
<h2>{{ "date-field.modal-title" | tediTranslate }}</h2>
|
|
16175
|
-
</tedi-modal-header>
|
|
16176
|
-
<tedi-modal-content class="tedi-date-field-modal__content">
|
|
16177
|
-
<tedi-calendar
|
|
16178
|
-
[bordered]="false"
|
|
16179
|
-
[value]="draft()"
|
|
16180
|
-
[currentMonth]="month()"
|
|
16181
|
-
[mode]="data.mode"
|
|
16182
|
-
[selectionLevel]="data.selectionLevel"
|
|
16183
|
-
[localeCode]="data.localeCode"
|
|
16184
|
-
[showOutsideDays]="data.showOutsideDays"
|
|
16185
|
-
[showWeekNumbers]="data.showWeekNumbers"
|
|
16186
|
-
[numberOfMonths]="data.numberOfMonths"
|
|
16187
|
-
[monthYearSelectType]="data.monthYearSelectType"
|
|
16188
|
-
[required]="data.required"
|
|
16189
|
-
[disabledMatchers]="data.disabledMatchers"
|
|
16190
|
-
[availableDays]="data.availableDays"
|
|
16191
|
-
[unavailableDays]="data.unavailableDays"
|
|
16192
|
-
[shouldDisableMonth]="data.shouldDisableMonth"
|
|
16193
|
-
[shouldDisableYear]="data.shouldDisableYear"
|
|
16194
|
-
[minYear]="data.minYear"
|
|
16195
|
-
[maxYear]="data.maxYear"
|
|
16196
|
-
(valueChange)="draft.set($event)"
|
|
16197
|
-
(currentMonthChange)="month.set($event)"
|
|
16198
|
-
(select)="handleSelect()"
|
|
16199
|
-
/>
|
|
16200
|
-
</tedi-modal-content>
|
|
16201
|
-
<tedi-modal-footer>
|
|
16202
|
-
<button
|
|
16203
|
-
tedi-button
|
|
16204
|
-
type="button"
|
|
16205
|
-
variant="secondary"
|
|
16206
|
-
(click)="cancel()"
|
|
16207
|
-
>
|
|
16208
|
-
{{ "date-field.cancel" | tediTranslate }}
|
|
16209
|
-
</button>
|
|
16210
|
-
<button tedi-button type="button" (click)="confirm()">
|
|
16211
|
-
{{ "date-field.confirm" | tediTranslate }}
|
|
16212
|
-
</button>
|
|
16213
|
-
</tedi-modal-footer>
|
|
16214
|
-
</tedi-modal>
|
|
16215
|
-
`, styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}\n"] }]
|
|
16182
|
+
], template: "<tedi-modal\n class=\"tedi-date-field-modal\"\n [class.tedi-date-field-modal--full-width]=\"data.calendarFullWidth\"\n>\n <tedi-modal-header>\n <h2>{{ \"date-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-date-field-modal__content\">\n <tedi-calendar\n [bordered]=\"false\"\n [value]=\"draft()\"\n [currentMonth]=\"month()\"\n [mode]=\"data.mode\"\n [selectionLevel]=\"data.selectionLevel\"\n [localeCode]=\"data.localeCode\"\n [showOutsideDays]=\"data.showOutsideDays\"\n [showWeekNumbers]=\"data.showWeekNumbers\"\n [numberOfMonths]=\"data.numberOfMonths\"\n [fullWidth]=\"data.calendarFullWidth\"\n [monthYearSelectType]=\"data.monthYearSelectType\"\n [required]=\"data.required\"\n [disabledMatchers]=\"data.disabledMatchers\"\n [availableDays]=\"data.availableDays\"\n [unavailableDays]=\"data.unavailableDays\"\n [shouldDisableMonth]=\"data.shouldDisableMonth\"\n [shouldDisableYear]=\"data.shouldDisableYear\"\n [minYear]=\"data.minYear\"\n [maxYear]=\"data.maxYear\"\n (valueChange)=\"draft.set($event)\"\n (currentMonthChange)=\"month.set($event)\"\n (select)=\"handleSelect()\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"date-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"button\" (click)=\"confirm()\">\n {{ \"date-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n</tedi-modal>\n", styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}.tedi-date-field-modal--full-width .tedi-date-field-modal__content{align-items:stretch;justify-content:flex-start}\n"] }]
|
|
16216
16183
|
}] });
|
|
16217
16184
|
|
|
16218
16185
|
class DateFieldComponent {
|
|
@@ -16415,6 +16382,8 @@ class DateFieldComponent {
|
|
|
16415
16382
|
modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
|
|
16416
16383
|
/** Make the modal fullscreen: `true` always, `false` never, breakpoint name → fullscreen below that breakpoint. Only applies when the calendar actually opens as a modal. */
|
|
16417
16384
|
fullscreen = input(false, ...(ngDevMode ? [{ debugName: "fullscreen" }] : []));
|
|
16385
|
+
/** Stretch the calendar across the modal body, scaling its cells (Calendar `fullWidth`). Only applies in modal mode. */
|
|
16386
|
+
calendarFullWidth = input(false, ...(ngDevMode ? [{ debugName: "calendarFullWidth" }] : []));
|
|
16418
16387
|
/**
|
|
16419
16388
|
* Custom formatter for the input's display string. Overrides the locale-aware
|
|
16420
16389
|
* default. Receives the `DateFieldValue` and returns a string.
|
|
@@ -16886,6 +16855,7 @@ class DateFieldComponent {
|
|
|
16886
16855
|
showOutsideDays: this.showOutsideDays(),
|
|
16887
16856
|
showWeekNumbers: this.showWeekNumbers(),
|
|
16888
16857
|
numberOfMonths: this.numberOfMonthsResolved(),
|
|
16858
|
+
calendarFullWidth: this.calendarFullWidth(),
|
|
16889
16859
|
monthYearSelectType: this.monthYearSelectType(),
|
|
16890
16860
|
required: this.required(),
|
|
16891
16861
|
disabledMatchers: this.resolvedDisabledMatchers(),
|
|
@@ -16907,7 +16877,9 @@ class DateFieldComponent {
|
|
|
16907
16877
|
// month count so a multi-month calendar fits side by side, and add the
|
|
16908
16878
|
// modal's two outer borders so the border-box content leaves room for
|
|
16909
16879
|
// it without a 2px horizontal scroll.
|
|
16910
|
-
maxWidth:
|
|
16880
|
+
maxWidth: this.calendarFullWidth()
|
|
16881
|
+
? undefined
|
|
16882
|
+
: `calc(${this.numberOfMonthsResolved()} * var(--tedi-containers-03) + 2 * var(--tedi-borders-01))`,
|
|
16911
16883
|
});
|
|
16912
16884
|
this.modalRef = ref;
|
|
16913
16885
|
ref.closed.subscribe((result) => {
|
|
@@ -17036,7 +17008,7 @@ class DateFieldComponent {
|
|
|
17036
17008
|
return host.querySelector(".tedi-date-input__input");
|
|
17037
17009
|
}
|
|
17038
17010
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17039
|
-
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: [
|
|
17011
|
+
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 }, calendarFullWidth: { classPropertyName: "calendarFullWidth", publicName: "calendarFullWidth", 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: [
|
|
17040
17012
|
{
|
|
17041
17013
|
provide: NG_VALUE_ACCESSOR,
|
|
17042
17014
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
@@ -17051,7 +17023,7 @@ class DateFieldComponent {
|
|
|
17051
17023
|
useFactory: (field) => field.childContext,
|
|
17052
17024
|
deps: [forwardRef(() => DateFieldComponent)],
|
|
17053
17025
|
},
|
|
17054
|
-
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { 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: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
17026
|
+
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "fullWidth", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { 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: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
17055
17027
|
}
|
|
17056
17028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
17057
17029
|
type: Component,
|
|
@@ -17085,7 +17057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
17085
17057
|
"[class.tedi-date-field--small]": "resolvedSize() === 'small'",
|
|
17086
17058
|
"[class.tedi-date-field--large]": "resolvedSize() === 'large'",
|
|
17087
17059
|
}, 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"] }]
|
|
17088
|
-
}], 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 }] }] } });
|
|
17060
|
+
}], 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 }] }], calendarFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarFullWidth", 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 }] }] } });
|
|
17089
17061
|
|
|
17090
17062
|
class DatePickerHeaderComponent {
|
|
17091
17063
|
/** Unique ID for ARIA controls */
|
|
@@ -20359,8 +20331,18 @@ class TimeFieldComponent {
|
|
|
20359
20331
|
optional: true,
|
|
20360
20332
|
});
|
|
20361
20333
|
derived = deriveControlState();
|
|
20334
|
+
/**
|
|
20335
|
+
* `aria-describedby` ids for the input — the wrapping form-field's feedback
|
|
20336
|
+
* text, plus any set on `<tedi-time-field>` itself.
|
|
20337
|
+
*/
|
|
20338
|
+
describedBy = controlDescribedBy();
|
|
20362
20339
|
/** Unique ID for label association and accessibility. */
|
|
20363
20340
|
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
20341
|
+
/**
|
|
20342
|
+
* `name` attribute of the input, used by native form submission. Omitted
|
|
20343
|
+
* from the DOM when not set.
|
|
20344
|
+
*/
|
|
20345
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
20364
20346
|
/** Selected time in `HH:mm` format. Two-way bindable. */
|
|
20365
20347
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
20366
20348
|
/** Placeholder shown when the input is empty. */
|
|
@@ -20506,6 +20488,9 @@ class TimeFieldComponent {
|
|
|
20506
20488
|
setDisabledState(disabled) {
|
|
20507
20489
|
this.formDisabled.set(disabled);
|
|
20508
20490
|
}
|
|
20491
|
+
setDescribedBy(ids) {
|
|
20492
|
+
this.describedBy.set(ids);
|
|
20493
|
+
}
|
|
20509
20494
|
handleInput(event) {
|
|
20510
20495
|
const value = event.target.value;
|
|
20511
20496
|
this.inputValue.set(value);
|
|
@@ -20699,7 +20684,7 @@ class TimeFieldComponent {
|
|
|
20699
20684
|
this.onTouched();
|
|
20700
20685
|
}
|
|
20701
20686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimeFieldComponent, isStandalone: true, selector: "tedi-time-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", 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 }, pickerVariant: { classPropertyName: "pickerVariant", publicName: "pickerVariant", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, pickerTrigger: { classPropertyName: "pickerTrigger", publicName: "pickerTrigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.tedi-time-field--small": "resolvedSize() === 'small'", "class.tedi-time-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-time-field" }, providers: [
|
|
20687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimeFieldComponent, isStandalone: true, selector: "tedi-time-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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", 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 }, pickerVariant: { classPropertyName: "pickerVariant", publicName: "pickerVariant", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, pickerTrigger: { classPropertyName: "pickerTrigger", publicName: "pickerTrigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.tedi-time-field--small": "resolvedSize() === 'small'", "class.tedi-time-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-time-field" }, providers: [
|
|
20703
20688
|
{
|
|
20704
20689
|
provide: NG_VALUE_ACCESSOR,
|
|
20705
20690
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
@@ -20709,7 +20694,7 @@ class TimeFieldComponent {
|
|
|
20709
20694
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
20710
20695
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
20711
20696
|
},
|
|
20712
|
-
], 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 (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 (selectionCommitted)=\"onPickerSelectionCommitted()\"\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", "padding"] }, { 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", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20697
|
+
], 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.name]=\"name()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-describedby]=\"describedBy.attribute()\"\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 (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 (selectionCommitted)=\"onPickerSelectionCommitted()\"\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", "padding"] }, { 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", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20713
20698
|
}
|
|
20714
20699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
20715
20700
|
type: Component,
|
|
@@ -20738,8 +20723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20738
20723
|
class: "tedi-time-field",
|
|
20739
20724
|
"[class.tedi-time-field--small]": "resolvedSize() === 'small'",
|
|
20740
20725
|
"[class.tedi-time-field--large]": "resolvedSize() === 'large'",
|
|
20741
|
-
}, 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 (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 (selectionCommitted)=\"onPickerSelectionCommitted()\"\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"] }]
|
|
20742
|
-
}], 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 }] }] } });
|
|
20726
|
+
}, 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.name]=\"name()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-describedby]=\"describedBy.attribute()\"\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 (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 (selectionCommitted)=\"onPickerSelectionCommitted()\"\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"] }]
|
|
20727
|
+
}], 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"] }], 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 }] }] } });
|
|
20743
20728
|
|
|
20744
20729
|
class ProgressBarComponent {
|
|
20745
20730
|
/**
|
|
@@ -23566,7 +23551,7 @@ class TableOfContentsComponent {
|
|
|
23566
23551
|
* list reads as a set of separated rows.
|
|
23567
23552
|
* @default false
|
|
23568
23553
|
*/
|
|
23569
|
-
|
|
23554
|
+
divided = input(false, ...(ngDevMode ? [{ debugName: "divided" }] : []));
|
|
23570
23555
|
/** Id of the currently active item. */
|
|
23571
23556
|
activeId = input(...(ngDevMode ? [undefined, { debugName: "activeId" }] : []));
|
|
23572
23557
|
/**
|
|
@@ -23680,7 +23665,7 @@ class TableOfContentsComponent {
|
|
|
23680
23665
|
return null;
|
|
23681
23666
|
}
|
|
23682
23667
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "stickyOffset", isSignal: true, isRequired: false, transformFunction: null }, stickyMaxHeight: { classPropertyName: "stickyMaxHeight", publicName: "stickyMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-table-of-contents--bordered": "bordered()", "attr.data-name": "'table-of-contents'", "style.--tedi-table-of-contents-sticky-top": "stickyOffset()", "style.--tedi-table-of-contents-sticky-max-height": "stickyMaxHeight()" }, classAttribute: "tedi-table-of-contents" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], ngImport: i0, template: "<ng-template #inner>\n @if (resolvedHeading()) {\n @switch (headingLevel()) {\n @case (\"h1\") {\n <h1\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h1>\n }\n @case (\"h2\") {\n <h2\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h2>\n }\n @case (\"h4\") {\n <h4\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h4>\n }\n @case (\"h5\") {\n <h5\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h5>\n }\n @case (\"h6\") {\n <h6\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h6>\n }\n @default {\n <h3\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h3>\n }\n }\n }\n <nav\n [attr.aria-labelledby]=\"\n !ariaLabel() && resolvedHeading() ? headingId : null\n \"\n [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n >\n <ul\n class=\"tedi-table-of-contents__list\"\n role=\"list\"\n [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n <div\n class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </div>\n} @else {\n <tedi-card\n class=\"tedi-table-of-contents__container\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <tedi-card-content [padding]=\"0\">\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--bordered .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--bordered .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--bordered .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23668
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "stickyOffset", isSignal: true, isRequired: false, transformFunction: null }, stickyMaxHeight: { classPropertyName: "stickyMaxHeight", publicName: "stickyMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-table-of-contents--divided": "divided()", "attr.data-name": "'table-of-contents'", "style.--tedi-table-of-contents-sticky-top": "stickyOffset()", "style.--tedi-table-of-contents-sticky-max-height": "stickyMaxHeight()" }, classAttribute: "tedi-table-of-contents" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], ngImport: i0, template: "<ng-template #inner>\n @if (resolvedHeading()) {\n @switch (headingLevel()) {\n @case (\"h1\") {\n <h1\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h1>\n }\n @case (\"h2\") {\n <h2\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h2>\n }\n @case (\"h4\") {\n <h4\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h4>\n }\n @case (\"h5\") {\n <h5\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h5>\n }\n @case (\"h6\") {\n <h6\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h6>\n }\n @default {\n <h3\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h3>\n }\n }\n }\n <nav\n [attr.aria-labelledby]=\"\n !ariaLabel() && resolvedHeading() ? headingId : null\n \"\n [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n >\n <ul\n class=\"tedi-table-of-contents__list\"\n role=\"list\"\n [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n <div\n class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </div>\n} @else {\n <tedi-card\n class=\"tedi-table-of-contents__container\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <tedi-card-content [padding]=\"0\">\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--divided .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--divided .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--divided .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23684
23669
|
}
|
|
23685
23670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, decorators: [{
|
|
23686
23671
|
type: Component,
|
|
@@ -23691,12 +23676,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
23691
23676
|
NgTemplateOutlet,
|
|
23692
23677
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
23693
23678
|
class: "tedi-table-of-contents",
|
|
23694
|
-
"[class.tedi-table-of-contents--
|
|
23679
|
+
"[class.tedi-table-of-contents--divided]": "divided()",
|
|
23695
23680
|
"[attr.data-name]": "'table-of-contents'",
|
|
23696
23681
|
"[style.--tedi-table-of-contents-sticky-top]": "stickyOffset()",
|
|
23697
23682
|
"[style.--tedi-table-of-contents-sticky-max-height]": "stickyMaxHeight()",
|
|
23698
|
-
}, template: "<ng-template #inner>\n @if (resolvedHeading()) {\n @switch (headingLevel()) {\n @case (\"h1\") {\n <h1\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h1>\n }\n @case (\"h2\") {\n <h2\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h2>\n }\n @case (\"h4\") {\n <h4\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h4>\n }\n @case (\"h5\") {\n <h5\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h5>\n }\n @case (\"h6\") {\n <h6\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h6>\n }\n @default {\n <h3\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h3>\n }\n }\n }\n <nav\n [attr.aria-labelledby]=\"\n !ariaLabel() && resolvedHeading() ? headingId : null\n \"\n [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n >\n <ul\n class=\"tedi-table-of-contents__list\"\n role=\"list\"\n [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n <div\n class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </div>\n} @else {\n <tedi-card\n class=\"tedi-table-of-contents__container\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <tedi-card-content [padding]=\"0\">\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--
|
|
23699
|
-
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }],
|
|
23683
|
+
}, template: "<ng-template #inner>\n @if (resolvedHeading()) {\n @switch (headingLevel()) {\n @case (\"h1\") {\n <h1\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h1>\n }\n @case (\"h2\") {\n <h2\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h2>\n }\n @case (\"h4\") {\n <h4\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h4>\n }\n @case (\"h5\") {\n <h5\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h5>\n }\n @case (\"h6\") {\n <h6\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h6>\n }\n @default {\n <h3\n tedi-text\n modifiers=\"h4\"\n class=\"tedi-table-of-contents__heading\"\n [id]=\"headingId\"\n >\n {{ resolvedHeading() }}\n </h3>\n }\n }\n }\n <nav\n [attr.aria-labelledby]=\"\n !ariaLabel() && resolvedHeading() ? headingId : null\n \"\n [attr.aria-label]=\"ariaLabel() || (resolvedHeading() ? null : navLabel())\"\n >\n <ul\n class=\"tedi-table-of-contents__list\"\n role=\"list\"\n [class.tedi-table-of-contents__list--headless]=\"!resolvedHeading()\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n</ng-template>\n\n@if (variant() === \"transparent\") {\n <div\n class=\"tedi-table-of-contents__container tedi-table-of-contents--transparent\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </div>\n} @else {\n <tedi-card\n class=\"tedi-table-of-contents__container\"\n [class.tedi-table-of-contents--sticky]=\"sticky()\"\n >\n <tedi-card-content [padding]=\"0\">\n <ng-container [ngTemplateOutlet]=\"inner\" />\n </tedi-card-content>\n </tedi-card>\n}\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--divided .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--divided .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--divided .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"] }]
|
|
23684
|
+
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyOffset", required: false }] }], stickyMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyMaxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => TableOfContentsItemComponent), { isSignal: true }] }] } });
|
|
23700
23685
|
|
|
23701
23686
|
/**
|
|
23702
23687
|
* Marks projected content as the trailing suffix of a
|
|
@@ -23749,7 +23734,7 @@ class TableOfContentsCollapsibleComponent {
|
|
|
23749
23734
|
* sheet's list reads as a set of separated rows. Mirrors `tedi-table-of-contents`.
|
|
23750
23735
|
* @default false
|
|
23751
23736
|
*/
|
|
23752
|
-
|
|
23737
|
+
divided = input(false, ...(ngDevMode ? [{ debugName: "divided" }] : []));
|
|
23753
23738
|
/**
|
|
23754
23739
|
* Pin the bar to the bottom of the viewport. Set `false` to render it inline.
|
|
23755
23740
|
*/
|
|
@@ -23887,12 +23872,12 @@ class TableOfContentsCollapsibleComponent {
|
|
|
23887
23872
|
});
|
|
23888
23873
|
}
|
|
23889
23874
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TableOfContentsCollapsibleComponent, isStandalone: true, selector: "tedi-table-of-contents-collapsible", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null },
|
|
23875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TableOfContentsCollapsibleComponent, isStandalone: true, selector: "tedi-table-of-contents-collapsible", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollContainer: { classPropertyName: "scrollContainer", publicName: "scrollContainer", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-name": "'table-of-contents-collapsible'" }, classAttribute: "tedi-table-of-contents-collapsible" }, providers: [
|
|
23891
23876
|
{
|
|
23892
23877
|
provide: TableOfContentsComponent,
|
|
23893
23878
|
useExisting: forwardRef(() => TableOfContentsCollapsibleComponent),
|
|
23894
23879
|
},
|
|
23895
|
-
], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tedi-table-of-contents__bar\"\n [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n aria-haspopup=\"dialog\"\n [open]=\"open()\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"toggle($event)\"\n ></button>\n</div>\n\n<ng-template #sheet>\n <div\n class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n [class.tedi-table-of-contents--
|
|
23880
|
+
], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => TableOfContentsItemComponent), isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tedi-table-of-contents__bar\"\n [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n aria-haspopup=\"dialog\"\n [open]=\"open()\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"toggle($event)\"\n ></button>\n</div>\n\n<ng-template #sheet>\n <div\n class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n [class.tedi-table-of-contents--divided]=\"divided()\"\n >\n <div class=\"tedi-table-of-contents__sheet-header\">\n <span\n tedi-text\n modifiers=\"bold\"\n class=\"tedi-table-of-contents__bar-title\"\n >\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n [open]=\"true\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"close()\"\n ></button>\n </div>\n <nav\n class=\"tedi-table-of-contents__sheet-nav\"\n [attr.aria-label]=\"navLabel()\"\n (click)=\"onListClick($event)\"\n >\n <ul\n class=\"tedi-table-of-contents__list tedi-table-of-contents__list--headless\"\n role=\"list\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n </div>\n</ng-template>\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--divided .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--divided .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--divided .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { 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 });
|
|
23896
23881
|
}
|
|
23897
23882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsCollapsibleComponent, decorators: [{
|
|
23898
23883
|
type: Component,
|
|
@@ -23904,8 +23889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
23904
23889
|
provide: TableOfContentsComponent,
|
|
23905
23890
|
useExisting: forwardRef(() => TableOfContentsCollapsibleComponent),
|
|
23906
23891
|
},
|
|
23907
|
-
], template: "<div\n class=\"tedi-table-of-contents__bar\"\n [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n aria-haspopup=\"dialog\"\n [open]=\"open()\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"toggle($event)\"\n ></button>\n</div>\n\n<ng-template #sheet>\n <div\n class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n [class.tedi-table-of-contents--
|
|
23908
|
-
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }],
|
|
23892
|
+
], template: "<div\n class=\"tedi-table-of-contents__bar\"\n [class.tedi-table-of-contents__bar--static]=\"!sticky()\"\n [class.tedi-table-of-contents__bar--hidden]=\"open()\"\n [class.tedi-table-of-contents__bar--tucked]=\"barHidden()\"\n>\n <span tedi-text modifiers=\"bold\" class=\"tedi-table-of-contents__bar-title\">\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n aria-haspopup=\"dialog\"\n [open]=\"open()\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"toggle($event)\"\n ></button>\n</div>\n\n<ng-template #sheet>\n <div\n class=\"tedi-table-of-contents tedi-table-of-contents__sheet\"\n [class.tedi-table-of-contents--divided]=\"divided()\"\n >\n <div class=\"tedi-table-of-contents__sheet-header\">\n <span\n tedi-text\n modifiers=\"bold\"\n class=\"tedi-table-of-contents__bar-title\"\n >\n {{ title() }}\n </span>\n <button\n tedi-collapse-button\n [open]=\"true\"\n [openText]=\"openLabel()\"\n [closeText]=\"closeLabel()\"\n [underline]=\"false\"\n (openChange)=\"close()\"\n ></button>\n </div>\n <nav\n class=\"tedi-table-of-contents__sheet-nav\"\n [attr.aria-label]=\"navLabel()\"\n (click)=\"onListClick($event)\"\n >\n <ul\n class=\"tedi-table-of-contents__list tedi-table-of-contents__list--headless\"\n role=\"list\"\n >\n <ng-content select=\"tedi-table-of-contents-item\" />\n </ul>\n </nav>\n </div>\n</ng-template>\n", styles: [".tedi-table-of-contents{--tedi-table-of-contents-padding: var(--card-padding-md-default);--tedi-table-of-contents-sticky-top: 1.5rem;--tedi-table-of-contents-sticky-bottom: 1.5rem;--tedi-table-of-contents-sticky-max-height: calc( 100dvh - var(--tedi-table-of-contents-sticky-top) - var(--tedi-table-of-contents-sticky-bottom) );display:block}.tedi-table-of-contents__container{display:block}.tedi-table-of-contents__container.tedi-table-of-contents--sticky{position:sticky;top:var(--tedi-table-of-contents-sticky-top);display:flex;flex-direction:column;max-height:var(--tedi-table-of-contents-sticky-max-height)}.tedi-table-of-contents--sticky>.tedi-card-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.tedi-table-of-contents--sticky .tedi-table-of-contents__heading{flex:none}.tedi-table-of-contents--sticky nav{flex:1 1 auto;min-height:0;margin-block:var(--card-padding-md-default);overflow-y:auto}.tedi-table-of-contents--sticky .tedi-table-of-contents__list{padding-block:0}.tedi-table-of-contents--transparent .tedi-table-of-contents__list{position:relative;padding-bottom:0;isolation:isolate}.tedi-table-of-contents--transparent .tedi-table-of-contents__list:before{position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:var(--tedi-borders-01);content:\"\";background:var(--card-border-primary)}.tedi-table-of-contents__heading{padding:var(--card-padding-md-default) var(--card-padding-md-default) 0 var(--card-padding-md-default)}.tedi-table-of-contents__list,.tedi-table-of-contents__group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}.tedi-table-of-contents__list{padding:var(--card-padding-md-default) 0}.tedi-table-of-contents--divided .tedi-table-of-contents__list{padding:var(--card-padding-xs) 0}.tedi-table-of-contents__list--headless{padding-top:var(--tedi-table-of-contents-padding)}.tedi-table-of-contents__item{display:flex;flex-direction:column}.tedi-table-of-contents__row{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-block:var(--table-of-contents-padding-y);padding-inline:var(--table-of-contents-padding-left-level-1);border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__row--level-2{padding-right:var(--list-padding-left-level-1);padding-left:var(--list-padding-left-level-2)}.tedi-table-of-contents__number{flex-shrink:0;min-width:1.5rem;color:var(--link-primary-default);text-align:right}.tedi-table-of-contents__separator{padding-block:var(--layout-grid-gutters-04);padding-right:var(--table-of-contents-padding-left-level-1);padding-left:calc(var(--table-of-contents-padding-left-level-1) - var(--table-of-contents-active-item-border-width));border-left:var(--table-of-contents-active-item-border-width) solid transparent}.tedi-table-of-contents__content{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tedi-table-of-contents__suffix{flex:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__number{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button){color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover{color:var(--link-primary-active)}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__row .tedi-table-of-contents__content :is(a,button):hover :not(tedi-icon){text-decoration:none}.tedi-table-of-contents__item--selected>.tedi-table-of-contents__separator{border-left-color:var(--table-of-contents-border-active)}.tedi-table-of-contents--divided .tedi-table-of-contents__row{border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents--divided .tedi-table-of-contents__list>.tedi-table-of-contents__item:last-child>.tedi-table-of-contents__row{border-bottom:0}.tedi-table-of-contents__bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-index-header);display:flex;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);background:var(--card-background-primary);border-top:var(--tedi-borders-01) solid var(--card-border-primary);border-top-left-radius:var(--card-radius-rounded);border-top-right-radius:var(--card-radius-rounded);transition:transform .3s ease}.tedi-table-of-contents__bar--static{position:static}.tedi-table-of-contents__bar--hidden{display:none}.tedi-table-of-contents__bar--tucked{transform:translateY(100%)}@media(prefers-reduced-motion:reduce){.tedi-table-of-contents__bar{transition:none}}.tedi-table-of-contents__bar-title{margin:0}.tedi-table-of-contents__sheet{--tedi-table-of-contents-padding: var(--card-padding-md-default);display:flex;flex-direction:column;max-height:80dvh}.tedi-table-of-contents__sheet-header{display:flex;flex:none;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default);border-bottom:var(--tedi-borders-01) solid var(--card-border-primary)}.tedi-table-of-contents__sheet-nav{flex:1 1 auto;min-height:0;overflow-y:auto}.tedi-table-of-contents__sheet-panel{width:100%;overflow-y:auto;background:var(--card-background-primary);border-top-left-radius:var(--modal-radius);border-top-right-radius:var(--modal-radius)}.tedi-table-of-contents__backdrop{background:var(--general-surface-overlay)}\n"] }]
|
|
23893
|
+
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], scrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainer", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => TableOfContentsItemComponent), { isSignal: true }] }], sheet: [{ type: i0.ViewChild, args: ["sheet", { isSignal: true }] }] } });
|
|
23909
23894
|
|
|
23910
23895
|
/**
|
|
23911
23896
|
* Root of the Tabs compound component. Wraps `tedi-tabs-list` and
|
|
@@ -23920,7 +23905,11 @@ class TabsComponent {
|
|
|
23920
23905
|
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
23921
23906
|
/** Initial active tab id for uncontrolled usage. */
|
|
23922
23907
|
defaultValue = input("", ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
|
|
23923
|
-
/**
|
|
23908
|
+
/**
|
|
23909
|
+
* Emitted with the id of the tab the user selected. In controlled mode the
|
|
23910
|
+
* active tab changes once the bound `value` is updated. With anchor triggers
|
|
23911
|
+
* the link already navigates, so don't navigate from this event.
|
|
23912
|
+
*/
|
|
23924
23913
|
valueChange = output();
|
|
23925
23914
|
/** Currently active tab id, read by the list, triggers and panels. */
|
|
23926
23915
|
activeTab = signal("", ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
@@ -24043,6 +24032,14 @@ class TabsTriggerComponent {
|
|
|
24043
24032
|
inline: "nearest",
|
|
24044
24033
|
});
|
|
24045
24034
|
}
|
|
24035
|
+
/** Activates the tab the way a click on it does: an anchor follows its link, a button selects its panel. */
|
|
24036
|
+
activate() {
|
|
24037
|
+
if (this.isAnchor) {
|
|
24038
|
+
this.host.nativeElement.click();
|
|
24039
|
+
return;
|
|
24040
|
+
}
|
|
24041
|
+
this.tabs.select(this.id());
|
|
24042
|
+
}
|
|
24046
24043
|
handleClick(event) {
|
|
24047
24044
|
if (this.disabled()) {
|
|
24048
24045
|
// Buttons are inert via the disabled attribute; a disabled anchor is kept
|
|
@@ -24237,7 +24234,13 @@ class TabsListComponent {
|
|
|
24237
24234
|
this.resizeObserver?.disconnect();
|
|
24238
24235
|
}
|
|
24239
24236
|
selectTab(id) {
|
|
24240
|
-
this.
|
|
24237
|
+
const trigger = this.triggers().find((t) => t.id() === id);
|
|
24238
|
+
if (trigger) {
|
|
24239
|
+
trigger.activate();
|
|
24240
|
+
}
|
|
24241
|
+
else {
|
|
24242
|
+
this.tabs.select(id);
|
|
24243
|
+
}
|
|
24241
24244
|
}
|
|
24242
24245
|
// Horizontal fade is implemented inline because the shared ScrollFadeComponent
|
|
24243
24246
|
// only supports a vertical (top/bottom) axis.
|