@tedi-design-system/angular 9.0.0 → 9.0.1-rc.2
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.
|
@@ -12449,7 +12449,12 @@ class PopoverComponent {
|
|
|
12449
12449
|
return;
|
|
12450
12450
|
const container = overlayEl.querySelector(".tedi-popover__container");
|
|
12451
12451
|
if (container) {
|
|
12452
|
-
|
|
12452
|
+
// Leave focus alone if the content already moved it inside (e.g. time picker column).
|
|
12453
|
+
setTimeout(() => {
|
|
12454
|
+
if (!container.contains(this.document.activeElement)) {
|
|
12455
|
+
container.focus({ preventScroll: true });
|
|
12456
|
+
}
|
|
12457
|
+
});
|
|
12453
12458
|
this.setupKeyboardNavigation(container);
|
|
12454
12459
|
}
|
|
12455
12460
|
this.horizontalPush.attach();
|
|
@@ -16067,6 +16072,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16067
16072
|
read: ElementRef,
|
|
16068
16073
|
}, isSignal: true }] }], textField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextFieldComponent), { isSignal: true }] }] } });
|
|
16069
16074
|
|
|
16075
|
+
/**
|
|
16076
|
+
* Gap in px between a form field and its dropdown panel. Internal: not exported
|
|
16077
|
+
* from the package.
|
|
16078
|
+
*/
|
|
16079
|
+
const FIELD_OVERLAY_GAP = 4;
|
|
16080
|
+
|
|
16070
16081
|
class DateFieldModalComponent {
|
|
16071
16082
|
data = inject(MODAL_DATA);
|
|
16072
16083
|
ref = inject((ModalRef));
|
|
@@ -16419,10 +16430,30 @@ class DateFieldComponent {
|
|
|
16419
16430
|
? { originX: "start", overlayX: "start" }
|
|
16420
16431
|
: { originX: "end", overlayX: "end" };
|
|
16421
16432
|
return [
|
|
16422
|
-
{
|
|
16423
|
-
|
|
16424
|
-
|
|
16425
|
-
|
|
16433
|
+
{
|
|
16434
|
+
...aligned,
|
|
16435
|
+
originY: "bottom",
|
|
16436
|
+
overlayY: "top",
|
|
16437
|
+
offsetY: FIELD_OVERLAY_GAP,
|
|
16438
|
+
},
|
|
16439
|
+
{
|
|
16440
|
+
...aligned,
|
|
16441
|
+
originY: "top",
|
|
16442
|
+
overlayY: "bottom",
|
|
16443
|
+
offsetY: -FIELD_OVERLAY_GAP,
|
|
16444
|
+
},
|
|
16445
|
+
{
|
|
16446
|
+
...opposite,
|
|
16447
|
+
originY: "bottom",
|
|
16448
|
+
overlayY: "top",
|
|
16449
|
+
offsetY: FIELD_OVERLAY_GAP,
|
|
16450
|
+
},
|
|
16451
|
+
{
|
|
16452
|
+
...opposite,
|
|
16453
|
+
originY: "top",
|
|
16454
|
+
overlayY: "bottom",
|
|
16455
|
+
offsetY: -FIELD_OVERLAY_GAP,
|
|
16456
|
+
},
|
|
16426
16457
|
];
|
|
16427
16458
|
}, ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
|
|
16428
16459
|
/**
|
|
@@ -18115,7 +18146,7 @@ class SearchSuggestionComponent {
|
|
|
18115
18146
|
});
|
|
18116
18147
|
}
|
|
18117
18148
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchSuggestionComponent, isStandalone: true, selector: "li[tedi-search-suggestion]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, custom: { classPropertyName: "custom", publicName: "custom", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, properties: { "class.tedi-search-suggestion--active": "isActive()", "class.tedi-search-suggestion--custom": "custom()", "class.tedi-search-suggestion--disabled": "disabledInput()", "attr.aria-selected": "isActive()", "attr.aria-disabled": "disabledInput() || null" }, classAttribute: "tedi-search-suggestion" }, ngImport: i0, template: "@if (custom()) {\n <ng-content />\n} @else {\n <span class=\"tedi-search-suggestion__label\">\n @for (part of parts(); track $index) {\n <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n part.text\n }}</span>\n }\n </span>\n\n @if (description()) {\n <span\n tedi-text\n class=\"tedi-search-suggestion__description\"\n color=\"tertiary\"\n modifiers=\"small\"\n >{{ description() }}</span\n >\n }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{background:var(--dropdown-item-hover-background)}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18149
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchSuggestionComponent, isStandalone: true, selector: "li[tedi-search-suggestion]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, custom: { classPropertyName: "custom", publicName: "custom", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, properties: { "class.tedi-search-suggestion--active": "isActive()", "class.tedi-search-suggestion--custom": "custom()", "class.tedi-search-suggestion--disabled": "disabledInput()", "attr.aria-selected": "isActive()", "attr.aria-disabled": "disabledInput() || null" }, classAttribute: "tedi-search-suggestion" }, ngImport: i0, template: "@if (custom()) {\n <ng-content />\n} @else {\n <span class=\"tedi-search-suggestion__label\">\n @for (part of parts(); track $index) {\n <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n part.text\n }}</span>\n }\n </span>\n\n @if (description()) {\n <span\n tedi-text\n class=\"tedi-search-suggestion__description\"\n color=\"tertiary\"\n modifiers=\"small\"\n >{{ description() }}</span\n >\n }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-search-suggestion:hover .tedi-search-suggestion__label [class*=tedi-text--],.tedi-search-suggestion--active .tedi-search-suggestion__label [class*=tedi-text--],.tedi-search-suggestion:hover .tedi-search-suggestion__description,.tedi-search-suggestion--active .tedi-search-suggestion__description{color:inherit}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18119
18150
|
}
|
|
18120
18151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionComponent, decorators: [{
|
|
18121
18152
|
type: Component,
|
|
@@ -18128,7 +18159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18128
18159
|
"[class.tedi-search-suggestion--disabled]": "disabledInput()",
|
|
18129
18160
|
"[attr.aria-selected]": "isActive()",
|
|
18130
18161
|
"[attr.aria-disabled]": "disabledInput() || null",
|
|
18131
|
-
}, template: "@if (custom()) {\n <ng-content />\n} @else {\n <span class=\"tedi-search-suggestion__label\">\n @for (part of parts(); track $index) {\n <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n part.text\n }}</span>\n }\n </span>\n\n @if (description()) {\n <span\n tedi-text\n class=\"tedi-search-suggestion__description\"\n color=\"tertiary\"\n modifiers=\"small\"\n >{{ description() }}</span\n >\n }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{background:var(--dropdown-item-hover-background)}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"] }]
|
|
18162
|
+
}, template: "@if (custom()) {\n <ng-content />\n} @else {\n <span class=\"tedi-search-suggestion__label\">\n @for (part of parts(); track $index) {\n <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n part.text\n }}</span>\n }\n </span>\n\n @if (description()) {\n <span\n tedi-text\n class=\"tedi-search-suggestion__description\"\n color=\"tertiary\"\n modifiers=\"small\"\n >{{ description() }}</span\n >\n }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-search-suggestion:hover .tedi-search-suggestion__label [class*=tedi-text--],.tedi-search-suggestion--active .tedi-search-suggestion__label [class*=tedi-text--],.tedi-search-suggestion:hover .tedi-search-suggestion__description,.tedi-search-suggestion--active .tedi-search-suggestion__description{color:inherit}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"] }]
|
|
18132
18163
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], custom: [{ type: i0.Input, args: [{ isSignal: true, alias: "custom", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
18133
18164
|
|
|
18134
18165
|
/**
|
|
@@ -18193,13 +18224,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18193
18224
|
}]
|
|
18194
18225
|
}] });
|
|
18195
18226
|
|
|
18196
|
-
/**
|
|
18197
|
-
* Flush against the field, flipping above when it would overflow. The panel
|
|
18198
|
-
* border meets the field border, so there is no offset.
|
|
18199
|
-
*/
|
|
18227
|
+
/** Below the field, flipping above when it would overflow. */
|
|
18200
18228
|
const SEARCH_OVERLAY_POSITIONS = [
|
|
18201
|
-
{
|
|
18202
|
-
|
|
18229
|
+
{
|
|
18230
|
+
originX: "start",
|
|
18231
|
+
originY: "bottom",
|
|
18232
|
+
overlayX: "start",
|
|
18233
|
+
overlayY: "top",
|
|
18234
|
+
offsetY: FIELD_OVERLAY_GAP,
|
|
18235
|
+
},
|
|
18236
|
+
{
|
|
18237
|
+
originX: "start",
|
|
18238
|
+
originY: "top",
|
|
18239
|
+
overlayX: "start",
|
|
18240
|
+
overlayY: "bottom",
|
|
18241
|
+
offsetY: -FIELD_OVERLAY_GAP,
|
|
18242
|
+
},
|
|
18203
18243
|
];
|
|
18204
18244
|
class SearchComponent {
|
|
18205
18245
|
/**
|
|
@@ -18327,8 +18367,9 @@ class SearchComponent {
|
|
|
18327
18367
|
suggestionSelect = output();
|
|
18328
18368
|
suggestionTemplate = contentChild(SearchSuggestionTemplateDirective, ...(ngDevMode ? [{ debugName: "suggestionTemplate" }] : []));
|
|
18329
18369
|
footerTemplate = contentChild(SearchFooterTemplateDirective, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
|
|
18330
|
-
inputRef = viewChild("searchInput",
|
|
18331
|
-
|
|
18370
|
+
inputRef = viewChild.required("searchInput", {
|
|
18371
|
+
read: (ElementRef),
|
|
18372
|
+
});
|
|
18332
18373
|
connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
|
|
18333
18374
|
suggestionRows = viewChildren(SearchSuggestionComponent, ...(ngDevMode ? [{ debugName: "suggestionRows" }] : []));
|
|
18334
18375
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
@@ -18352,10 +18393,10 @@ class SearchComponent {
|
|
|
18352
18393
|
overlayPositions = SEARCH_OVERLAY_POSITIONS;
|
|
18353
18394
|
panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
|
|
18354
18395
|
/**
|
|
18355
|
-
*
|
|
18356
|
-
*
|
|
18396
|
+
* The bordered input box, not the whole form field, so the panel overlays the
|
|
18397
|
+
* hint instead of opening below it.
|
|
18357
18398
|
*/
|
|
18358
|
-
|
|
18399
|
+
panelOrigin = signal(this.hostElement.nativeElement, ...(ngDevMode ? [{ debugName: "panelOrigin" }] : []));
|
|
18359
18400
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
18360
18401
|
fieldIcon = computed(() => this.button() ? undefined : this.searchIcon(), ...(ngDevMode ? [{ debugName: "fieldIcon" }] : []));
|
|
18361
18402
|
fieldHeight = computed(() => {
|
|
@@ -18376,7 +18417,7 @@ class SearchComponent {
|
|
|
18376
18417
|
return null;
|
|
18377
18418
|
return button?.ariaLabel ?? this.translationService.translate("search");
|
|
18378
18419
|
}, ...(ngDevMode ? [{ debugName: "buttonAriaLabel" }] : []));
|
|
18379
|
-
feedbackId = computed(() =>
|
|
18420
|
+
feedbackId = computed(() => `${this.inputId()}-feedback`, ...(ngDevMode ? [{ debugName: "feedbackId" }] : []));
|
|
18380
18421
|
searchAriaLabel = computed(() => this.ariaLabel() ||
|
|
18381
18422
|
this.label() ||
|
|
18382
18423
|
this.placeholder() ||
|
|
@@ -18489,9 +18530,15 @@ class SearchComponent {
|
|
|
18489
18530
|
openPanel() {
|
|
18490
18531
|
if (!this.autocomplete())
|
|
18491
18532
|
return;
|
|
18533
|
+
this.panelOrigin.set(this.fieldSurface());
|
|
18492
18534
|
this.panelWidth.set(this.hostElement.nativeElement.offsetWidth);
|
|
18493
18535
|
this.panelOpen.set(true);
|
|
18494
18536
|
}
|
|
18537
|
+
/** The box wrapping input and icons, or the input itself when it owns the surface. */
|
|
18538
|
+
fieldSurface() {
|
|
18539
|
+
const input = this.inputRef().nativeElement;
|
|
18540
|
+
return input.closest(".tedi-form-field__box") ?? input;
|
|
18541
|
+
}
|
|
18495
18542
|
closePanel() {
|
|
18496
18543
|
this.cleanupScrollListener();
|
|
18497
18544
|
this.panelOpen.set(false);
|
|
@@ -18499,9 +18546,6 @@ class SearchComponent {
|
|
|
18499
18546
|
// would leave `aria-activedescendant` pointing at a removed element.
|
|
18500
18547
|
this.resetActiveOption();
|
|
18501
18548
|
}
|
|
18502
|
-
onPositionChange(change) {
|
|
18503
|
-
this.panelAbove.set(change.connectionPair.overlayY === "bottom");
|
|
18504
|
-
}
|
|
18505
18549
|
onOverlayAttach() {
|
|
18506
18550
|
if (this.hideOnScroll()) {
|
|
18507
18551
|
this.setupScrollListener();
|
|
@@ -18610,9 +18654,7 @@ class SearchComponent {
|
|
|
18610
18654
|
return footer ? getFocusableElements(footer) : [];
|
|
18611
18655
|
}
|
|
18612
18656
|
focusAfterField() {
|
|
18613
|
-
const input = this.inputRef()
|
|
18614
|
-
if (!input)
|
|
18615
|
-
return;
|
|
18657
|
+
const input = this.inputRef().nativeElement;
|
|
18616
18658
|
const panel = this.panelElement();
|
|
18617
18659
|
const focusables = getFocusableElements(this.hostElement.nativeElement.ownerDocument.body).filter((el) => !panel?.contains(el));
|
|
18618
18660
|
const next = focusables[focusables.indexOf(input) + 1];
|
|
@@ -18647,8 +18689,7 @@ class SearchComponent {
|
|
|
18647
18689
|
this.searchEvent.emit(this.value());
|
|
18648
18690
|
}
|
|
18649
18691
|
focus() {
|
|
18650
|
-
|
|
18651
|
-
input?.focus();
|
|
18692
|
+
this.inputRef().nativeElement.focus();
|
|
18652
18693
|
}
|
|
18653
18694
|
writeValue(value) {
|
|
18654
18695
|
this.value.set(value ?? "");
|
|
@@ -18702,7 +18743,7 @@ class SearchComponent {
|
|
|
18702
18743
|
useExisting: forwardRef(() => SearchComponent),
|
|
18703
18744
|
multi: true,
|
|
18704
18745
|
},
|
|
18705
|
-
], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "
|
|
18746
|
+
], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"panelOrigin()\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div class=\"tedi-search__panel\">\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18706
18747
|
}
|
|
18707
18748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
|
|
18708
18749
|
type: Component,
|
|
@@ -18732,8 +18773,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18732
18773
|
"[style.--tedi-search-field-height]": "fieldHeight()",
|
|
18733
18774
|
"[class.tedi-search--button-icon-only]": "!!button() && !button()?.text",
|
|
18734
18775
|
"[class.tedi-search--has-button]": "!!button()",
|
|
18735
|
-
}, template: "<tedi-form-field\n class=\"tedi-search__field\"\n
|
|
18736
|
-
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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 }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDescription", required: false }] }], bindDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDisabled", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], resultsCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsCountText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clear: [{ type: i0.Output, args: ["clear"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }], suggestionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchSuggestionTemplateDirective), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchFooterTemplateDirective), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ["searchInput", { ...{
|
|
18776
|
+
}, template: "<tedi-form-field\n class=\"tedi-search__field\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"panelOrigin()\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div class=\"tedi-search__panel\">\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"] }]
|
|
18777
|
+
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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 }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDescription", required: false }] }], bindDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDisabled", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], resultsCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsCountText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clear: [{ type: i0.Output, args: ["clear"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }], suggestionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchSuggestionTemplateDirective), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchFooterTemplateDirective), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ["searchInput", { ...{
|
|
18778
|
+
read: (ElementRef),
|
|
18779
|
+
}, isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], suggestionRows: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SearchSuggestionComponent), { isSignal: true }] }] } });
|
|
18737
18780
|
|
|
18738
18781
|
/**
|
|
18739
18782
|
* Row of buttons inside a `tediSearchFooter`. Centres them and wraps to a new
|
|
@@ -18741,13 +18784,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
18741
18784
|
*/
|
|
18742
18785
|
class SearchFooterActionsComponent {
|
|
18743
18786
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SearchFooterActionsComponent, isStandalone: true, selector: "tedi-search-footer-actions", host: { classAttribute: "tedi-search-footer-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:
|
|
18787
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SearchFooterActionsComponent, isStandalone: true, selector: "tedi-search-footer-actions", host: { classAttribute: "tedi-search-footer-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18745
18788
|
}
|
|
18746
18789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterActionsComponent, decorators: [{
|
|
18747
18790
|
type: Component,
|
|
18748
18791
|
args: [{ standalone: true, selector: "tedi-search-footer-actions", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
18749
18792
|
class: "tedi-search-footer-actions",
|
|
18750
|
-
}, styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:
|
|
18793
|
+
}, styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"] }]
|
|
18751
18794
|
}] });
|
|
18752
18795
|
|
|
18753
18796
|
class SliderComponent {
|
|
@@ -19583,6 +19626,11 @@ class TimePickerComponent {
|
|
|
19583
19626
|
trapFocus = input(false, ...(ngDevMode ? [{ debugName: "trapFocus" }] : []));
|
|
19584
19627
|
/** Emitted when the picker requests to be closed (Tab while `trapFocus` is `true`). */
|
|
19585
19628
|
closeRequested = output();
|
|
19629
|
+
/**
|
|
19630
|
+
* Emitted when the user explicitly picks a value: a minute click or Enter on the minute column (`scroll`),
|
|
19631
|
+
* or a slot/item selection (`slots`/`dropdown`). Scrolling or arrowing the wheels does not emit.
|
|
19632
|
+
*/
|
|
19633
|
+
selectionCommitted = output();
|
|
19586
19634
|
el = inject((ElementRef));
|
|
19587
19635
|
uniqueId = inject(_IdGenerator).getId("tedi-time-picker-");
|
|
19588
19636
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
@@ -19784,8 +19832,8 @@ class TimePickerComponent {
|
|
|
19784
19832
|
selectMinute(minute) {
|
|
19785
19833
|
if (this.isDisabled())
|
|
19786
19834
|
return;
|
|
19787
|
-
|
|
19788
|
-
const hourStr =
|
|
19835
|
+
// With no value, use the hour the wheel is parked on.
|
|
19836
|
+
const hourStr = String(this.selectedHourIndex()).padStart(2, "0");
|
|
19789
19837
|
const newValue = `${hourStr}:${minute}`;
|
|
19790
19838
|
if (this.value() === newValue)
|
|
19791
19839
|
return;
|
|
@@ -19799,6 +19847,7 @@ class TimePickerComponent {
|
|
|
19799
19847
|
this.value.set(slot);
|
|
19800
19848
|
this.onTouched();
|
|
19801
19849
|
this.onChange(slot);
|
|
19850
|
+
this.selectionCommitted.emit();
|
|
19802
19851
|
}
|
|
19803
19852
|
isSlotSelected(slot) {
|
|
19804
19853
|
return this.value() === slot;
|
|
@@ -19817,6 +19866,7 @@ class TimePickerComponent {
|
|
|
19817
19866
|
onMinuteClick(minute) {
|
|
19818
19867
|
if (this.isDisabled())
|
|
19819
19868
|
return;
|
|
19869
|
+
this.settlePendingScrollSelection();
|
|
19820
19870
|
this.hasUserGesture.minute = false;
|
|
19821
19871
|
this.clearGestureTimer("minute");
|
|
19822
19872
|
const list = this.minutes();
|
|
@@ -19825,6 +19875,7 @@ class TimePickerComponent {
|
|
|
19825
19875
|
this.scrollColumnToIndex("minute", idx, "smooth");
|
|
19826
19876
|
this.selectMinute(minute);
|
|
19827
19877
|
this.minuteColumns()[0]?.nativeElement.focus({ preventScroll: true });
|
|
19878
|
+
this.selectionCommitted.emit();
|
|
19828
19879
|
}
|
|
19829
19880
|
onColumnKeydown(event, type) {
|
|
19830
19881
|
if (this.isDisabled())
|
|
@@ -19839,8 +19890,18 @@ class TimePickerComponent {
|
|
|
19839
19890
|
}
|
|
19840
19891
|
if (event.key === "Enter" || event.key === " ") {
|
|
19841
19892
|
event.preventDefault();
|
|
19842
|
-
if (type === "hour")
|
|
19893
|
+
if (type === "hour") {
|
|
19843
19894
|
this.focusOtherColumn("hour");
|
|
19895
|
+
}
|
|
19896
|
+
else {
|
|
19897
|
+
// The highlight can be ahead of the value (no value yet, or a scroll
|
|
19898
|
+
// still in its debounce), so commit the highlighted hour and minute.
|
|
19899
|
+
this.settlePendingScrollSelection();
|
|
19900
|
+
const minute = this.minutes()[this.highlightedMinuteIndex()];
|
|
19901
|
+
if (minute !== undefined)
|
|
19902
|
+
this.selectMinute(minute);
|
|
19903
|
+
this.selectionCommitted.emit();
|
|
19904
|
+
}
|
|
19844
19905
|
return;
|
|
19845
19906
|
}
|
|
19846
19907
|
const list = type === "hour" ? this.hours : this.minutes();
|
|
@@ -19992,6 +20053,25 @@ class TimePickerComponent {
|
|
|
19992
20053
|
this.selectMinute(list[index]);
|
|
19993
20054
|
}, SCROLL_DEBOUNCE_MS);
|
|
19994
20055
|
}
|
|
20056
|
+
/**
|
|
20057
|
+
* Called before a minute commit, which may close the picker. A debounce left
|
|
20058
|
+
* running would fire on the closed column, read scrollTop 0 and overwrite the
|
|
20059
|
+
* value. The pending hour is applied from its highlighted row; the pending
|
|
20060
|
+
* minute is dropped, as the commit picks the minute itself.
|
|
20061
|
+
*/
|
|
20062
|
+
settlePendingScrollSelection() {
|
|
20063
|
+
["hour", "minute"].forEach((type) => {
|
|
20064
|
+
const timer = this.scrollDebounceTimer[type];
|
|
20065
|
+
if (!timer)
|
|
20066
|
+
return;
|
|
20067
|
+
clearTimeout(timer);
|
|
20068
|
+
delete this.scrollDebounceTimer[type];
|
|
20069
|
+
this.hasUserGesture[type] = false;
|
|
20070
|
+
this.clearGestureTimer(type);
|
|
20071
|
+
if (type === "hour")
|
|
20072
|
+
this.selectHour(this.hours[this.hourScrollIndex()]);
|
|
20073
|
+
});
|
|
20074
|
+
}
|
|
19995
20075
|
/**
|
|
19996
20076
|
* Gecko hands a torn-down scroll container's offset to the one replacing it
|
|
19997
20077
|
* in the same position, so a picker can arrive already scrolled to the
|
|
@@ -20085,6 +20165,10 @@ class TimePickerComponent {
|
|
|
20085
20165
|
}
|
|
20086
20166
|
}
|
|
20087
20167
|
scrollToSelected() {
|
|
20168
|
+
// A smooth scroll cut short by the picker closing (closeOnSelect) would
|
|
20169
|
+
// otherwise keep its lock and stop alignScroll from moving the column.
|
|
20170
|
+
this.clearProgrammaticScroll("hour");
|
|
20171
|
+
this.clearProgrammaticScroll("minute");
|
|
20088
20172
|
this.alignScroll("instant");
|
|
20089
20173
|
}
|
|
20090
20174
|
getColumnElement(type) {
|
|
@@ -20170,7 +20254,7 @@ class TimePickerComponent {
|
|
|
20170
20254
|
delete this.programmaticScrollTarget[type];
|
|
20171
20255
|
}
|
|
20172
20256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [
|
|
20257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested", selectionCommitted: "selectionCommitted" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [
|
|
20174
20258
|
{
|
|
20175
20259
|
provide: NG_VALUE_ACCESSOR,
|
|
20176
20260
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
@@ -20199,7 +20283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20199
20283
|
multi: true,
|
|
20200
20284
|
},
|
|
20201
20285
|
], template: "@if (variant() === \"scroll\") {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"\n highlightedHourIndex() === i\n \"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"\n highlightedMinuteIndex() === i\n \"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === \"dropdown\") {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">\n {{ \"time-picker.no-slots\" | tediTranslate }}\n </p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"\n isSlotSelected(slot)\n \"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === \"slots\") {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">\n {{ \"time-picker.no-slots\" | tediTranslate }}\n </p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"] }]
|
|
20202
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
|
|
20286
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], selectionCommitted: [{ type: i0.Output, args: ["selectionCommitted"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
|
|
20203
20287
|
|
|
20204
20288
|
class TimePickerModalComponent {
|
|
20205
20289
|
data = inject(MODAL_DATA);
|
|
@@ -20238,7 +20322,7 @@ class TimePickerModalComponent {
|
|
|
20238
20322
|
form.requestSubmit();
|
|
20239
20323
|
};
|
|
20240
20324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimePickerModalComponent, isStandalone: true, selector: "tedi-time-picker-modal", ngImport: i0, template: "<form class=\"tedi-time-picker-modal__form\" (submit)=\"onSubmit($event)\">\n <tedi-modal class=\"tedi-time-picker-modal\">\n <tedi-modal-header>\n <h2>{{ \"time-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-time-picker-modal__content\">\n <tedi-time-picker\n [value]=\"draft()\"\n [variant]=\"data.variant\"\n [timeSlots]=\"data.timeSlots\"\n [columns]=\"data.columns\"\n [showSlotIndicator]=\"data.showSlotIndicator\"\n [minuteStep]=\"data.minuteStep\"\n (valueChange)=\"draft.set($event)\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"time-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"submit\">\n {{ \"time-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n </tedi-modal>\n</form>\n", styles: [".tedi-time-picker-modal{--_tedi-modal-body-padding: 0}.tedi-time-picker-modal .tedi-time-picker{width:100%;--tedi-time-picker-width: 100%}.tedi-time-picker-modal__content{display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { 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: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TimePickerModalComponent, isStandalone: true, selector: "tedi-time-picker-modal", ngImport: i0, template: "<form class=\"tedi-time-picker-modal__form\" (submit)=\"onSubmit($event)\">\n <tedi-modal class=\"tedi-time-picker-modal\">\n <tedi-modal-header>\n <h2>{{ \"time-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-time-picker-modal__content\">\n <tedi-time-picker\n [value]=\"draft()\"\n [variant]=\"data.variant\"\n [timeSlots]=\"data.timeSlots\"\n [columns]=\"data.columns\"\n [showSlotIndicator]=\"data.showSlotIndicator\"\n [minuteStep]=\"data.minuteStep\"\n (valueChange)=\"draft.set($event)\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"time-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"submit\">\n {{ \"time-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n </tedi-modal>\n</form>\n", styles: [".tedi-time-picker-modal{--_tedi-modal-body-padding: 0}.tedi-time-picker-modal .tedi-time-picker{width:100%;--tedi-time-picker-width: 100%}.tedi-time-picker-modal__content{display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { 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: "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 });
|
|
20242
20326
|
}
|
|
20243
20327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerModalComponent, decorators: [{
|
|
20244
20328
|
type: Component,
|
|
@@ -20298,7 +20382,10 @@ class TimeFieldComponent {
|
|
|
20298
20382
|
useNativePicker = input(false, ...(ngDevMode ? [{ debugName: "useNativePicker" }] : []));
|
|
20299
20383
|
/** What opens the picker: only the icon (`button`) or also clicking the input (`input`). */
|
|
20300
20384
|
pickerTrigger = input("button", ...(ngDevMode ? [{ debugName: "pickerTrigger" }] : []));
|
|
20301
|
-
/**
|
|
20385
|
+
/**
|
|
20386
|
+
* Close the popover as soon as the user picks a value. In the `scroll` variant only a minute click or
|
|
20387
|
+
* Enter in the minute column closes it — scrolling or arrowing the wheels does not.
|
|
20388
|
+
*/
|
|
20302
20389
|
closeOnSelect = input(false, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
|
|
20303
20390
|
/** Predefined `HH:mm` strings for the `slots` and `dropdown` variants. */
|
|
20304
20391
|
timeSlots = input([], ...(ngDevMode ? [{ debugName: "timeSlots" }] : []));
|
|
@@ -20576,6 +20663,8 @@ class TimeFieldComponent {
|
|
|
20576
20663
|
this.onTouched();
|
|
20577
20664
|
this.onChange(newValue);
|
|
20578
20665
|
}
|
|
20666
|
+
}
|
|
20667
|
+
onPickerSelectionCommitted() {
|
|
20579
20668
|
if (this.closeOnSelect()) {
|
|
20580
20669
|
this.closePopover();
|
|
20581
20670
|
}
|
|
@@ -20603,7 +20692,7 @@ class TimeFieldComponent {
|
|
|
20603
20692
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
20604
20693
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
20605
20694
|
},
|
|
20606
|
-
], 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 (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20695
|
+
], 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"] }, { 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 });
|
|
20607
20696
|
}
|
|
20608
20697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
20609
20698
|
type: Component,
|
|
@@ -20632,7 +20721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20632
20721
|
class: "tedi-time-field",
|
|
20633
20722
|
"[class.tedi-time-field--small]": "resolvedSize() === 'small'",
|
|
20634
20723
|
"[class.tedi-time-field--large]": "resolvedSize() === 'large'",
|
|
20635
|
-
}, 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 (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"] }]
|
|
20724
|
+
}, 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"] }]
|
|
20636
20725
|
}], 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 }] }] } });
|
|
20637
20726
|
|
|
20638
20727
|
class ProgressBarComponent {
|