@tedi-design-system/angular 7.1.0-rc.12 → 7.1.0-rc.13
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.
|
@@ -5288,6 +5288,11 @@ class TextFieldComponent {
|
|
|
5288
5288
|
handleBlur() {
|
|
5289
5289
|
this.onTouched();
|
|
5290
5290
|
}
|
|
5291
|
+
focus() {
|
|
5292
|
+
if (this.disabled())
|
|
5293
|
+
return;
|
|
5294
|
+
this.el.nativeElement.focus();
|
|
5295
|
+
}
|
|
5291
5296
|
clearField() {
|
|
5292
5297
|
if (this.disabled())
|
|
5293
5298
|
return;
|
|
@@ -5307,7 +5312,7 @@ class TextFieldComponent {
|
|
|
5307
5312
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
5308
5313
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
5309
5314
|
},
|
|
5310
|
-
], ngImport: i0, template: "", isInline: true, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:
|
|
5315
|
+
], ngImport: i0, template: "", isInline: true, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5311
5316
|
}
|
|
5312
5317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
5313
5318
|
type: Component,
|
|
@@ -5328,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
5328
5333
|
"[disabled]": "disabled()",
|
|
5329
5334
|
"(input)": "handleInputChange($event)",
|
|
5330
5335
|
"(blur)": "handleBlur()",
|
|
5331
|
-
}, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:
|
|
5336
|
+
}, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}\n"] }]
|
|
5332
5337
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5333
5338
|
|
|
5334
5339
|
class SpinnerComponent {
|
|
@@ -5993,6 +5998,11 @@ class DateInputComponent {
|
|
|
5993
5998
|
(this.inputValue() !== "" || this.hasTags()), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
|
|
5994
5999
|
iconAriaLabel = this.translationService.track("date-picker.open-calendar");
|
|
5995
6000
|
clearAriaLabel = this.translationService.track("date-picker.clear-date");
|
|
6001
|
+
/** Moves focus to the text input. Used by the wrapping field. */
|
|
6002
|
+
focusInput() {
|
|
6003
|
+
const target = this.inputElement()?.nativeElement;
|
|
6004
|
+
target?.focus();
|
|
6005
|
+
}
|
|
5996
6006
|
handleInput(event) {
|
|
5997
6007
|
const target = event.target;
|
|
5998
6008
|
this.inputChange.emit(target.value);
|
|
@@ -6037,7 +6047,7 @@ class DateInputComponent {
|
|
|
6037
6047
|
return width - inputMinWidth;
|
|
6038
6048
|
}
|
|
6039
6049
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6040
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled() && !readOnly()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0
|
|
6050
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled() && !readOnly()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6041
6051
|
}
|
|
6042
6052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
6043
6053
|
type: Component,
|
|
@@ -6056,7 +6066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
6056
6066
|
"[class.tedi-date-input--tags-single-row]": "hasTags() && !multiRow()",
|
|
6057
6067
|
"[class.tedi-date-input--tags-measuring]": "hasTags() && !multiRow() && visibleTagsCount() === null",
|
|
6058
6068
|
"(window:resize)": "onResize()",
|
|
6059
|
-
}, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled() && !readOnly()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0
|
|
6069
|
+
}, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled() && !readOnly()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"] }]
|
|
6060
6070
|
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
|
|
6061
6071
|
read: ElementRef,
|
|
6062
6072
|
}, isSignal: true }] }], fieldElement: [{ type: i0.ViewChild, args: ["fieldElement", { isSignal: true }] }], tagElements: [{ type: i0.ViewChildren, args: ["tagElement", { ...{
|
|
@@ -8646,6 +8656,11 @@ class DateFieldComponent {
|
|
|
8646
8656
|
setInvalidState(isInvalid) {
|
|
8647
8657
|
this.formInvalid.set(isInvalid);
|
|
8648
8658
|
}
|
|
8659
|
+
focus() {
|
|
8660
|
+
if (this.fieldDisabled())
|
|
8661
|
+
return;
|
|
8662
|
+
this.dateInput().focusInput();
|
|
8663
|
+
}
|
|
8649
8664
|
clearField() {
|
|
8650
8665
|
if (this.fieldDisabled() || this.readOnly())
|
|
8651
8666
|
return;
|
|
@@ -11869,8 +11884,25 @@ class FormFieldComponent {
|
|
|
11869
11884
|
clear() {
|
|
11870
11885
|
this.control?.clearField?.();
|
|
11871
11886
|
}
|
|
11887
|
+
/**
|
|
11888
|
+
* The control never fills the whole box — the box padding and the layout
|
|
11889
|
+
* wrappers around the control are outside its hit area — so clicking there
|
|
11890
|
+
* would otherwise leave the field unfocused. Focus the control instead, unless
|
|
11891
|
+
* the click landed on something interactive that handles it itself (the
|
|
11892
|
+
* control, the clear/calendar buttons, a tag's close button).
|
|
11893
|
+
*/
|
|
11894
|
+
handleBoxMouseDown(event) {
|
|
11895
|
+
if (this.isDisabled())
|
|
11896
|
+
return;
|
|
11897
|
+
const target = event.target;
|
|
11898
|
+
if (target?.closest("button, input, textarea, select, a"))
|
|
11899
|
+
return;
|
|
11900
|
+
// Keep the browser from moving focus off the control we are about to focus.
|
|
11901
|
+
event.preventDefault();
|
|
11902
|
+
this.control?.focus?.();
|
|
11903
|
+
}
|
|
11872
11904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11873
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field
|
|
11905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11874
11906
|
}
|
|
11875
11907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
11876
11908
|
type: Component,
|
|
@@ -11882,7 +11914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11882
11914
|
TediTranslationPipe,
|
|
11883
11915
|
], host: {
|
|
11884
11916
|
"[class]": "hostClasses()",
|
|
11885
|
-
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field
|
|
11917
|
+
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"] }]
|
|
11886
11918
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], control: [{
|
|
11887
11919
|
type: ContentChild,
|
|
11888
11920
|
args: [TEDI_FORM_FIELD_CONTROL]
|
|
@@ -12712,6 +12744,11 @@ class TimeFieldComponent {
|
|
|
12712
12744
|
this.onChange(null);
|
|
12713
12745
|
this.inputElement().nativeElement.focus();
|
|
12714
12746
|
}
|
|
12747
|
+
focus() {
|
|
12748
|
+
if (this.isDisabled())
|
|
12749
|
+
return;
|
|
12750
|
+
this.inputElement().nativeElement.focus();
|
|
12751
|
+
}
|
|
12715
12752
|
clearField() {
|
|
12716
12753
|
this.clearInput();
|
|
12717
12754
|
}
|
|
@@ -12865,7 +12902,7 @@ class TimeFieldComponent {
|
|
|
12865
12902
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
12866
12903
|
useExisting: forwardRef(() => TimeFieldComponent),
|
|
12867
12904
|
},
|
|
12868
|
-
], 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 class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [attr.role]=\"null\"\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 class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\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 #fieldEl class=\"tedi-time-field__field\">\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 class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0
|
|
12905
|
+
], 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 class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [attr.role]=\"null\"\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 class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\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 #fieldEl class=\"tedi-time-field__field\">\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 class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{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--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:0;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { 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 });
|
|
12869
12906
|
}
|
|
12870
12907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
12871
12908
|
type: Component,
|
|
@@ -12892,7 +12929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
12892
12929
|
},
|
|
12893
12930
|
], host: {
|
|
12894
12931
|
class: "tedi-time-field",
|
|
12895
|
-
}, 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 class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [attr.role]=\"null\"\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 class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\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 #fieldEl class=\"tedi-time-field__field\">\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 class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0
|
|
12932
|
+
}, 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 class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [attr.role]=\"null\"\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 class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\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 #fieldEl class=\"tedi-time-field__field\">\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 class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{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--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:0;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
|
|
12896
12933
|
}], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }] } });
|
|
12897
12934
|
|
|
12898
12935
|
class TextGroupLabelComponent {
|