@ethlete/components 1.0.0-next.67 → 1.0.0-next.68
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.
|
@@ -23344,6 +23344,9 @@ const formSupportFactory = () => {
|
|
|
23344
23344
|
const warningDimensions = signalElementDimensions(warningContent);
|
|
23345
23345
|
const hintDimensions = signalElementDimensions(hintContent);
|
|
23346
23346
|
const counterDimensions = signalElementDimensions(counterContent);
|
|
23347
|
+
const hostDimensions = signalElementDimensions(inject(ElementRef));
|
|
23348
|
+
const hostShown = computed(() => (hostDimensions().offset?.width ?? 0) > 0, /* @ts-ignore */
|
|
23349
|
+
...(ngDevMode ? [{ debugName: "hostShown" }] : /* istanbul ignore next */ []));
|
|
23347
23350
|
const effectiveErrors = computed(() => {
|
|
23348
23351
|
const parseMessage = formFieldDir.parseError() ? formFieldDir.parseErrorMessage() : null;
|
|
23349
23352
|
return parseMessage ? [{ kind: 'etParseError', message: parseMessage }] : formFieldDir.errors();
|
|
@@ -23424,7 +23427,11 @@ const formSupportFactory = () => {
|
|
|
23424
23427
|
return supportPresentation().renderedWarnings;
|
|
23425
23428
|
}, /* @ts-ignore */
|
|
23426
23429
|
...(ngDevMode ? [{ debugName: "visibleWarnings" }] : /* istanbul ignore next */ []));
|
|
23430
|
+
const supportCanAnimate = signal(false, /* @ts-ignore */
|
|
23431
|
+
...(ngDevMode ? [{ debugName: "supportCanAnimate" }] : /* istanbul ignore next */ []));
|
|
23427
23432
|
const supportHeight = computed(() => {
|
|
23433
|
+
if (!supportCanAnimate())
|
|
23434
|
+
return null;
|
|
23428
23435
|
const stackHeight = (() => {
|
|
23429
23436
|
switch (semanticSupportState()) {
|
|
23430
23437
|
case SUPPORT_CONTENT_STATE.ERROR:
|
|
@@ -23441,6 +23448,31 @@ const formSupportFactory = () => {
|
|
|
23441
23448
|
return Math.max(stackHeight, counterHeight);
|
|
23442
23449
|
}, /* @ts-ignore */
|
|
23443
23450
|
...(ngDevMode ? [{ debugName: "supportHeight" }] : /* istanbul ignore next */ []));
|
|
23451
|
+
const activeContentWidth = computed(() => {
|
|
23452
|
+
switch (semanticSupportState()) {
|
|
23453
|
+
case SUPPORT_CONTENT_STATE.ERROR:
|
|
23454
|
+
return errorDimensions().offset?.width ?? 0;
|
|
23455
|
+
case SUPPORT_CONTENT_STATE.WARNING:
|
|
23456
|
+
return warningDimensions().offset?.width ?? 0;
|
|
23457
|
+
case SUPPORT_CONTENT_STATE.HINT:
|
|
23458
|
+
return hintDimensions().offset?.width ?? 0;
|
|
23459
|
+
default:
|
|
23460
|
+
return null;
|
|
23461
|
+
}
|
|
23462
|
+
}, /* @ts-ignore */
|
|
23463
|
+
...(ngDevMode ? [{ debugName: "activeContentWidth" }] : /* istanbul ignore next */ []));
|
|
23464
|
+
// support content already there when the control lays out - first, or again after a hidden
|
|
23465
|
+
// ancestor (an inactive tab panel) shows it - must sit in place in that frame without animating;
|
|
23466
|
+
// the measured height lands a frame late, so the region keeps its natural height until this arms
|
|
23467
|
+
effect((onCleanup) => {
|
|
23468
|
+
if (!hostShown()) {
|
|
23469
|
+
supportCanAnimate.set(false);
|
|
23470
|
+
return;
|
|
23471
|
+
}
|
|
23472
|
+
if (supportCanAnimate() || activeContentWidth() === 0)
|
|
23473
|
+
return;
|
|
23474
|
+
onCleanup(nextFrame(() => supportCanAnimate.set(true)));
|
|
23475
|
+
});
|
|
23444
23476
|
for (const [state, animatable] of [
|
|
23445
23477
|
[SUPPORT_CONTENT_STATE.ERROR, errorAnimatable],
|
|
23446
23478
|
[SUPPORT_CONTENT_STATE.WARNING, warningAnimatable],
|
|
@@ -23500,6 +23532,7 @@ const formSupportFactory = () => {
|
|
|
23500
23532
|
visibleErrors,
|
|
23501
23533
|
visibleWarnings,
|
|
23502
23534
|
supportHeight,
|
|
23535
|
+
supportCanAnimate: supportCanAnimate.asReadonly(),
|
|
23503
23536
|
};
|
|
23504
23537
|
};
|
|
23505
23538
|
const FORM_SUPPORT_DEF = /* @__PURE__ */ defineProvider(formSupportFactory, {
|
|
@@ -26752,11 +26785,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
26752
26785
|
*/
|
|
26753
26786
|
class FormSupportStylesComponent {
|
|
26754
26787
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormSupportStylesComponent, isStandalone: true, selector: "et-form-support-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;
|
|
26788
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormSupportStylesComponent, isStandalone: true, selector: "et-form-support-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}.et-form-support[data-can-animate]{transition:block-size var(--et-form-support-duration) ease}.et-form-support[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{.et-form-support[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
26756
26789
|
}
|
|
26757
26790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportStylesComponent, decorators: [{
|
|
26758
26791
|
type: Component,
|
|
26759
|
-
args: [{ selector: 'et-form-support-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;
|
|
26792
|
+
args: [{ selector: 'et-form-support-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}.et-form-support[data-can-animate]{transition:block-size var(--et-form-support-duration) ease}.et-form-support[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{.et-form-support[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"] }]
|
|
26760
26793
|
}] });
|
|
26761
26794
|
/** @internal */
|
|
26762
26795
|
const mountFormSupportStyles = () => injectStyleManager().mount(FormSupportStylesComponent);
|
|
@@ -26825,13 +26858,14 @@ class FormSupportComponent {
|
|
|
26825
26858
|
});
|
|
26826
26859
|
}
|
|
26827
26860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormSupportComponent, isStandalone: true, selector: "et-form-support", host: { properties: { "style.block-size.px": "support.supportHeight()" }, classAttribute: "et-form-support" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"et-form-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-support-content et-form-support-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"support.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-support-content et-form-support-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-support-content et-form-support-hint\"\n etAnimatable\n >\n <ng-content />\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
26861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormSupportComponent, isStandalone: true, selector: "et-form-support", host: { properties: { "style.block-size.px": "support.supportHeight()", "attr.data-can-animate": "support.supportCanAnimate() || null" }, classAttribute: "et-form-support" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"et-form-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-support-content et-form-support-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"support.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-support-content et-form-support-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-support-content et-form-support-hint\"\n etAnimatable\n >\n <ng-content />\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
26829
26862
|
}
|
|
26830
26863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportComponent, decorators: [{
|
|
26831
26864
|
type: Component,
|
|
26832
26865
|
args: [{ selector: 'et-form-support', encapsulation: ViewEncapsulation.None, imports: [AnimatableDirective, FormErrorComponent, FormWarningComponent, ProvideColorDirective], host: {
|
|
26833
26866
|
class: 'et-form-support',
|
|
26834
26867
|
'[style.block-size.px]': 'support.supportHeight()',
|
|
26868
|
+
'[attr.data-can-animate]': 'support.supportCanAnimate() || null',
|
|
26835
26869
|
}, template: "<div class=\"et-form-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-support-content et-form-support-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"support.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-support-content et-form-support-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"support.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-support-content et-form-support-hint\"\n etAnimatable\n >\n <ng-content />\n </div>\n }\n</div>\n" }]
|
|
26836
26870
|
}], ctorParameters: () => [], propDecorators: { errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatable: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
26837
26871
|
|
|
@@ -27573,7 +27607,7 @@ class FormFieldComponent {
|
|
|
27573
27607
|
this.formFieldDir.activate();
|
|
27574
27608
|
}
|
|
27575
27609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme()\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
27610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n <div\n [style.block-size.px]=\"support.supportHeight()\"\n [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n class=\"et-form-field-support\"\n etColorInteractiveExclude\n >\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme()\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
27577
27611
|
}
|
|
27578
27612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
27579
27613
|
type: Component,
|
|
@@ -27613,7 +27647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
27613
27647
|
'[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
|
|
27614
27648
|
'[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
|
|
27615
27649
|
'[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
|
|
27616
|
-
}, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme()\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
|
|
27650
|
+
}, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n <div\n [style.block-size.px]=\"support.supportHeight()\"\n [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n class=\"et-form-field-support\"\n etColorInteractiveExclude\n >\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme()\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme()\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-ink-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
|
|
27617
27651
|
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], counterContent: [{ type: i0.ViewChild, args: ['counterContent', { isSignal: true }] }], controlFrame: [{ type: i0.ViewChild, args: ['controlFrame', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatable: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DescriptionComponent), { ...{ descendants: false }, isSignal: true }] }] } });
|
|
27618
27652
|
|
|
27619
27653
|
const INPUT_MASK_HOST = new InjectionToken('INPUT_MASK_HOST');
|
|
@@ -31772,6 +31806,8 @@ class TimePickerDirective {
|
|
|
31772
31806
|
this.defaultFormat = injectTimeFormat();
|
|
31773
31807
|
this.defaultLocale = injectDateLocale();
|
|
31774
31808
|
this.hostElement = injectHostElement();
|
|
31809
|
+
/** Blocks every change: a press, a drag and the keys leave the time alone. */
|
|
31810
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
31775
31811
|
/** Whether the ring holds one time (`value`) or a range (`rangeValue`). */
|
|
31776
31812
|
this.mode = input('single', /* @ts-ignore */
|
|
31777
31813
|
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
@@ -31898,7 +31934,7 @@ class TimePickerDirective {
|
|
|
31898
31934
|
* range hands the active side on to the end. Returns whether it handed on.
|
|
31899
31935
|
*/
|
|
31900
31936
|
commitRingMinute(side, minute) {
|
|
31901
|
-
if (!isStopOpen(this.ringStops()[side], minute)) {
|
|
31937
|
+
if (this.disabled() || !isStopOpen(this.ringStops()[side], minute)) {
|
|
31902
31938
|
return false;
|
|
31903
31939
|
}
|
|
31904
31940
|
const current = this.ringValue(side);
|
|
@@ -31941,7 +31977,7 @@ class TimePickerDirective {
|
|
|
31941
31977
|
return createTimeRingStops(this.minuteStep(), other === null ? isOpen : (minute) => isOpen(minute) && (side === 'end' ? minute >= other : minute <= other));
|
|
31942
31978
|
}
|
|
31943
31979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
31944
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerDirective, isStandalone: true, selector: "[etTimePicker]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, activeSide: { classPropertyName: "activeSide", publicName: "activeSide", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, rangeDays: { classPropertyName: "rangeDays", publicName: "rangeDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeSide: "activeSideChange", timeSelect: "timeSelect", rangeHandOff: "rangeHandOff" }, host: { listeners: { "focusin": "refreshNow($event)" } }, exportAs: ["etTimePicker"], ngImport: i0 }); }
|
|
31980
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerDirective, isStandalone: true, selector: "[etTimePicker]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, activeSide: { classPropertyName: "activeSide", publicName: "activeSide", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, rangeDays: { classPropertyName: "rangeDays", publicName: "rangeDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeSide: "activeSideChange", timeSelect: "timeSelect", rangeHandOff: "rangeHandOff" }, host: { listeners: { "focusin": "refreshNow($event)" } }, exportAs: ["etTimePicker"], ngImport: i0 }); }
|
|
31945
31981
|
}
|
|
31946
31982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerDirective, decorators: [{
|
|
31947
31983
|
type: Directive,
|
|
@@ -31952,7 +31988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
31952
31988
|
'(focusin)': 'refreshNow($event)',
|
|
31953
31989
|
},
|
|
31954
31990
|
}]
|
|
31955
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], activeSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSide", required: false }] }, { type: i0.Output, args: ["activeSideChange"] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], rangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeDays", required: false }] }], timeSelect: [{ type: i0.Output, args: ["timeSelect"] }], rangeHandOff: [{ type: i0.Output, args: ["rangeHandOff"] }] } });
|
|
31991
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], activeSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSide", required: false }] }, { type: i0.Output, args: ["activeSideChange"] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], rangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeDays", required: false }] }], timeSelect: [{ type: i0.Output, args: ["timeSelect"] }], rangeHandOff: [{ type: i0.Output, args: ["rangeHandOff"] }] } });
|
|
31956
31992
|
|
|
31957
31993
|
// codes 3020-3029 (inside the shared date & time inputs block 3000-3099)
|
|
31958
31994
|
const TIME_PICKER_ERROR_CODES = {
|
|
@@ -32011,7 +32047,7 @@ class TimePickerRingDirective {
|
|
|
32011
32047
|
}
|
|
32012
32048
|
handlePointerDown(event) {
|
|
32013
32049
|
const picker = this.picker;
|
|
32014
|
-
if (event.button !== 0 || this.draggingSide() !== null) {
|
|
32050
|
+
if (picker.disabled() || event.button !== 0 || this.draggingSide() !== null) {
|
|
32015
32051
|
return;
|
|
32016
32052
|
}
|
|
32017
32053
|
const pressMinute = this.minuteAt({ x: event.clientX, y: event.clientY }, { ignoreCentre: true });
|
|
@@ -32223,7 +32259,7 @@ class TimePickerRingHandleDirective {
|
|
|
32223
32259
|
}
|
|
32224
32260
|
}
|
|
32225
32261
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerRingHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
32226
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerRingHandleDirective, isStandalone: true, selector: "[etTimePickerRingHandle]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider", "
|
|
32262
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerRingHandleDirective, isStandalone: true, selector: "[etTimePickerRingHandle]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider", "aria-valuemin": "0", "aria-valuemax": "1439" }, listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus()", "blur": "pointerFocused.set(false)" }, properties: { "attr.tabindex": "picker.disabled() ? -1 : 0", "attr.aria-disabled": "picker.disabled() || null", "attr.data-disabled": "picker.disabled() || null", "attr.aria-valuenow": "minute()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "resolvedLabel()", "attr.data-side": "side()", "attr.data-empty": "minute() === null || null", "attr.data-active": "active() || null", "attr.data-dragging": "dragging() || null", "attr.data-pointer-focused": "pointerFocused() || null" } }, exportAs: ["etTimePickerRingHandle"], ngImport: i0 }); }
|
|
32227
32263
|
}
|
|
32228
32264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerRingHandleDirective, decorators: [{
|
|
32229
32265
|
type: Directive,
|
|
@@ -32232,7 +32268,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
32232
32268
|
exportAs: 'etTimePickerRingHandle',
|
|
32233
32269
|
host: {
|
|
32234
32270
|
role: 'slider',
|
|
32235
|
-
tabindex: '0',
|
|
32271
|
+
'[attr.tabindex]': 'picker.disabled() ? -1 : 0',
|
|
32272
|
+
'[attr.aria-disabled]': 'picker.disabled() || null',
|
|
32273
|
+
'[attr.data-disabled]': 'picker.disabled() || null',
|
|
32236
32274
|
'aria-valuemin': '0',
|
|
32237
32275
|
'aria-valuemax': '1439',
|
|
32238
32276
|
'[attr.aria-valuenow]': 'minute()',
|
|
@@ -32387,7 +32425,7 @@ class TimePickerComponent {
|
|
|
32387
32425
|
return minutes === 0 ? hoursText : `${hoursText} ${minutesText}`;
|
|
32388
32426
|
}
|
|
32389
32427
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()" }, classAttribute: "et-time-picker" }, viewQueries: [{ propertyName: "ring", first: true, predicate: TimePickerRingDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide", "day", "day", "rangeDays", "rangeDays"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect", "rangeHandOff", "rangeHandOff"] }], ngImport: i0, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n @let trackState = track();\n\n @if (trackState.allBlocked) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n }\n @for (path of trackState.blocked; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n }\n @if (trackState.full) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n }\n @for (path of trackState.open; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n }\n @if (arc(); as arcPath) {\n <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n }\n\n <g class=\"et-time-picker-ticks\">\n @for (tick of ticks; track tick.hour) {\n <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n }\n </g>\n\n <g class=\"et-time-picker-labels\">\n @for (label of hourLabels(); track label.hour) {\n <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n }\n </g>\n\n @if (twelveHour()) {\n <path\n [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n class=\"et-time-picker-mark\"\n d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n />\n <g class=\"et-time-picker-mark\">\n <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n @for (ray of sunRays; track ray.index) {\n <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n }\n </g>\n }\n\n <text\n [attr.x]=\"CENTER\"\n [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n [attr.data-kind]=\"readoutState.kind\"\n [attr.data-long]=\"readoutState.main.length > 5 || null\"\n [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n class=\"et-time-picker-readout\"\n >\n {{ readoutState.main }}\n </text>\n @if (readoutState.note !== null) {\n <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n }\n </svg>\n\n <div\n #startHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"start\"\n ></div>\n\n @if (timePicker.mode() === 'range') {\n <div\n #endHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"end\"\n ></div>\n }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{
|
|
32428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()", "attr.data-disabled": "timePicker.disabled() || null" }, classAttribute: "et-time-picker" }, viewQueries: [{ propertyName: "ring", first: true, predicate: TimePickerRingDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide", "day", "day", "rangeDays", "rangeDays", "disabled", "disabled"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect", "rangeHandOff", "rangeHandOff"] }], ngImport: i0, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n @let trackState = track();\n\n @if (trackState.allBlocked) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n }\n @for (path of trackState.blocked; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n }\n @if (trackState.full) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n }\n @for (path of trackState.open; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n }\n @if (arc(); as arcPath) {\n <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n }\n\n <g class=\"et-time-picker-ticks\">\n @for (tick of ticks; track tick.hour) {\n <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n }\n </g>\n\n <g class=\"et-time-picker-labels\">\n @for (label of hourLabels(); track label.hour) {\n <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n }\n </g>\n\n @if (twelveHour()) {\n <path\n [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n class=\"et-time-picker-mark\"\n d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n />\n <g class=\"et-time-picker-mark\">\n <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n @for (ray of sunRays; track ray.index) {\n <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n }\n </g>\n }\n\n <text\n [attr.x]=\"CENTER\"\n [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n [attr.data-kind]=\"readoutState.kind\"\n [attr.data-long]=\"readoutState.main.length > 5 || null\"\n [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n class=\"et-time-picker-readout\"\n >\n {{ readoutState.main }}\n </text>\n @if (readoutState.note !== null) {\n <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n }\n </svg>\n\n <div\n #startHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"start\"\n ></div>\n\n @if (timePicker.mode() === 'range') {\n <div\n #endHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"end\"\n ></div>\n }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:opacity .12s ease}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{cursor:pointer}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));--_et-time-picker-halo-shadow: 0 0 0 calc(var(--et-time-picker-handle-size) * var(--_et-time-picker-halo)) color-mix( in srgb, var(--et-theme-color-primary-solid, currentColor) var(--_et-time-picker-halo-opacity, 16%), transparent );box-shadow:var(--_et-time-picker-halo-shadow, none);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .3}.et-time-picker .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{--_et-time-picker-halo: .35;--_et-time-picker-halo-opacity: 22%}.et-time-picker[data-mode=range] .et-time-picker-handle:hover:not([data-disabled],[data-dragging],[data-active]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,var(--et-surface-background-solid, Canvas))}.et-time-picker[data-mode=single] .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker[data-mode=single] .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .65;--_et-time-picker-halo-opacity: 32%}.et-time-picker:where([data-disabled]){opacity:.4}.et-time-picker:where([data-disabled]) .et-time-picker-track,.et-time-picker:where([data-disabled]) .et-time-picker-arc,.et-time-picker:where([data-disabled]) .et-time-picker-handle{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.et-time-picker,.et-time-picker .et-time-picker-handle{transition:none}}}\n"], dependencies: [{ kind: "directive", type: TimePickerRingDirective, selector: "[etTimePickerRing]", exportAs: ["etTimePickerRing"] }, { kind: "directive", type: TimePickerRingHandleDirective, selector: "[etTimePickerRingHandle]", inputs: ["side", "label"], exportAs: ["etTimePickerRingHandle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
32391
32429
|
}
|
|
32392
32430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
32393
32431
|
type: Component,
|
|
@@ -32409,13 +32447,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
32409
32447
|
'activeSide',
|
|
32410
32448
|
'day',
|
|
32411
32449
|
'rangeDays',
|
|
32450
|
+
'disabled',
|
|
32412
32451
|
],
|
|
32413
32452
|
outputs: ['valueChange', 'rangeValueChange', 'activeSideChange', 'timeSelect', 'rangeHandOff'],
|
|
32414
32453
|
},
|
|
32415
32454
|
], host: {
|
|
32416
32455
|
class: 'et-time-picker',
|
|
32417
32456
|
'[attr.data-mode]': 'timePicker.mode()',
|
|
32418
|
-
|
|
32457
|
+
'[attr.data-disabled]': 'timePicker.disabled() || null',
|
|
32458
|
+
}, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n @let trackState = track();\n\n @if (trackState.allBlocked) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n }\n @for (path of trackState.blocked; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n }\n @if (trackState.full) {\n <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n }\n @for (path of trackState.open; track $index) {\n <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n }\n @if (arc(); as arcPath) {\n <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n }\n\n <g class=\"et-time-picker-ticks\">\n @for (tick of ticks; track tick.hour) {\n <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n }\n </g>\n\n <g class=\"et-time-picker-labels\">\n @for (label of hourLabels(); track label.hour) {\n <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n }\n </g>\n\n @if (twelveHour()) {\n <path\n [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n class=\"et-time-picker-mark\"\n d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n />\n <g class=\"et-time-picker-mark\">\n <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n @for (ray of sunRays; track ray.index) {\n <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n }\n </g>\n }\n\n <text\n [attr.x]=\"CENTER\"\n [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n [attr.data-kind]=\"readoutState.kind\"\n [attr.data-long]=\"readoutState.main.length > 5 || null\"\n [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n class=\"et-time-picker-readout\"\n >\n {{ readoutState.main }}\n </text>\n @if (readoutState.note !== null) {\n <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n }\n </svg>\n\n <div\n #startHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"start\"\n ></div>\n\n @if (timePicker.mode() === 'range') {\n <div\n #endHandle=\"etTimePickerRingHandle\"\n [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n class=\"et-time-picker-handle\"\n etTimePickerRingHandle\n side=\"end\"\n ></div>\n }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:opacity .12s ease}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{cursor:pointer}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));--_et-time-picker-halo-shadow: 0 0 0 calc(var(--et-time-picker-handle-size) * var(--_et-time-picker-halo)) color-mix( in srgb, var(--et-theme-color-primary-solid, currentColor) var(--_et-time-picker-halo-opacity, 16%), transparent );box-shadow:var(--_et-time-picker-halo-shadow, none);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .3}.et-time-picker .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{--_et-time-picker-halo: .35;--_et-time-picker-halo-opacity: 22%}.et-time-picker[data-mode=range] .et-time-picker-handle:hover:not([data-disabled],[data-dragging],[data-active]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,var(--et-surface-background-solid, Canvas))}.et-time-picker[data-mode=single] .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker[data-mode=single] .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .65;--_et-time-picker-halo-opacity: 32%}.et-time-picker:where([data-disabled]){opacity:.4}.et-time-picker:where([data-disabled]) .et-time-picker-track,.et-time-picker:where([data-disabled]) .et-time-picker-arc,.et-time-picker:where([data-disabled]) .et-time-picker-handle{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.et-time-picker,.et-time-picker .et-time-picker-handle{transition:none}}}\n"] }]
|
|
32419
32459
|
}], propDecorators: { ring: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TimePickerRingDirective), { isSignal: true }] }] } });
|
|
32420
32460
|
|
|
32421
32461
|
const TIME_PICKER_IMPORTS = [
|
|
@@ -33774,7 +33814,7 @@ class DateTimeInputComponent {
|
|
|
33774
33814
|
this.dateTimeInput.focus(options);
|
|
33775
33815
|
}
|
|
33776
33816
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33777
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-date-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-time-input-panel\">\n <div class=\"et-date-time-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.pickerDate()\"\n [min]=\"dateTimeInput.pickerMinDate()\"\n [max]=\"dateTimeInput.pickerMaxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"handleDateSelect($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.pickerTime()\"\n [day]=\"dateTimeInput.pickerDate()\"\n [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"dateTimeInput.minTime()\"\n [max]=\"dateTimeInput.maxTime()\"\n [timeFilter]=\"dateTimeInput.timeFilter()\"\n (valueChange)=\"dateTimeInput.selectTime($event)\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
33817
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-date-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-time-input-panel\">\n <div class=\"et-date-time-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.pickerDate()\"\n [min]=\"dateTimeInput.pickerMinDate()\"\n [max]=\"dateTimeInput.pickerMaxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"handleDateSelect($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.pickerTime()\"\n [disabled]=\"dateTimeInput.disabled()\"\n [day]=\"dateTimeInput.pickerDate()\"\n [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"dateTimeInput.minTime()\"\n [max]=\"dateTimeInput.maxTime()\"\n [timeFilter]=\"dateTimeInput.timeFilter()\"\n (valueChange)=\"dateTimeInput.selectTime($event)\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
33778
33818
|
}
|
|
33779
33819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeInputComponent, decorators: [{
|
|
33780
33820
|
type: Component,
|
|
@@ -33832,7 +33872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
33832
33872
|
},
|
|
33833
33873
|
], host: {
|
|
33834
33874
|
class: 'et-date-time-input',
|
|
33835
|
-
}, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-time-input-panel\">\n <div class=\"et-date-time-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.pickerDate()\"\n [min]=\"dateTimeInput.pickerMinDate()\"\n [max]=\"dateTimeInput.pickerMaxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"handleDateSelect($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.pickerTime()\"\n [day]=\"dateTimeInput.pickerDate()\"\n [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"dateTimeInput.minTime()\"\n [max]=\"dateTimeInput.maxTime()\"\n [timeFilter]=\"dateTimeInput.timeFilter()\"\n (valueChange)=\"dateTimeInput.selectTime($event)\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
|
|
33875
|
+
}, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-time-input-panel\">\n <div class=\"et-date-time-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.pickerDate()\"\n [min]=\"dateTimeInput.pickerMinDate()\"\n [max]=\"dateTimeInput.pickerMaxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"handleDateSelect($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.pickerTime()\"\n [disabled]=\"dateTimeInput.disabled()\"\n [day]=\"dateTimeInput.pickerDate()\"\n [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"dateTimeInput.minTime()\"\n [max]=\"dateTimeInput.maxTime()\"\n [timeFilter]=\"dateTimeInput.timeFilter()\"\n (valueChange)=\"dateTimeInput.selectTime($event)\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
|
|
33836
33876
|
}], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTabLabel", required: false }] }], timeTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeTabLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
33837
33877
|
|
|
33838
33878
|
const DATE_TIME_INPUT_IMPORTS = [
|
|
@@ -34203,7 +34243,7 @@ class DateTimeRangeInputComponent {
|
|
|
34203
34243
|
this.rangeInput.focus(options);
|
|
34204
34244
|
}
|
|
34205
34245
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
34206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "presets", "presets", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-range-presets-layout\">\n @if (rangeInput.presetList.options().length > 0) {\n <et-date-range-presets\n [options]=\"rangeInput.presetList.options()\"\n (presetSelect)=\"rangeInput.selectPreset($event)\"\n />\n }\n\n <div class=\"et-date-time-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.pickerDateRange()\"\n [min]=\"rangeInput.pickerMinDate()\"\n [max]=\"rangeInput.pickerMaxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"handleRangeSelect($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.pickerTimeRange()\"\n [rangeDays]=\"rangeInput.pickerDateRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "component", type: DateRangePresetsComponent, selector: "et-date-range-presets", inputs: ["options"], outputs: ["presetSelect"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
34246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "presets", "presets", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-range-presets-layout\">\n @if (rangeInput.presetList.options().length > 0) {\n <et-date-range-presets\n [options]=\"rangeInput.presetList.options()\"\n (presetSelect)=\"rangeInput.selectPreset($event)\"\n />\n }\n\n <div class=\"et-date-time-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.pickerDateRange()\"\n [min]=\"rangeInput.pickerMinDate()\"\n [max]=\"rangeInput.pickerMaxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"handleRangeSelect($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.pickerTimeRange()\"\n [disabled]=\"rangeInput.disabled()\"\n [rangeDays]=\"rangeInput.pickerDateRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "component", type: DateRangePresetsComponent, selector: "et-date-range-presets", inputs: ["options"], outputs: ["presetSelect"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
34207
34247
|
}
|
|
34208
34248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeRangeInputComponent, decorators: [{
|
|
34209
34249
|
type: Component,
|
|
@@ -34269,7 +34309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
34269
34309
|
role: 'group',
|
|
34270
34310
|
'[attr.aria-label]': 'rangeInput.ariaLabel() || null',
|
|
34271
34311
|
'[attr.aria-labelledby]': 'rangeInput.labelId()',
|
|
34272
|
-
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-range-presets-layout\">\n @if (rangeInput.presetList.options().length > 0) {\n <et-date-range-presets\n [options]=\"rangeInput.presetList.options()\"\n (presetSelect)=\"rangeInput.selectPreset($event)\"\n />\n }\n\n <div class=\"et-date-time-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.pickerDateRange()\"\n [min]=\"rangeInput.pickerMinDate()\"\n [max]=\"rangeInput.pickerMaxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"handleRangeSelect($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.pickerTimeRange()\"\n [rangeDays]=\"rangeInput.pickerDateRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
|
|
34312
|
+
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-time-range-input-field\"\n etDateTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-calendar\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <div class=\"et-date-range-presets-layout\">\n @if (rangeInput.presetList.options().length > 0) {\n <et-date-range-presets\n [options]=\"rangeInput.presetList.options()\"\n (presetSelect)=\"rangeInput.selectPreset($event)\"\n />\n }\n\n <div class=\"et-date-time-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group\n [value]=\"panes.active()\"\n [aria-label]=\"dateTimeLabels().paneSwitch\"\n (valueChange)=\"panes.select($event)\"\n >\n <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n </et-segmented-button-group>\n </div>\n\n <div\n [attr.data-active-pane]=\"panes.active()\"\n [attr.data-nav]=\"panes.nav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.pickerDateRange()\"\n [min]=\"rangeInput.pickerMinDate()\"\n [max]=\"rangeInput.pickerMaxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"handleRangeSelect($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.pickerTimeRange()\"\n [disabled]=\"rangeInput.disabled()\"\n [rangeDays]=\"rangeInput.pickerDateRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </div>\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
|
|
34273
34313
|
}], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], datesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesTabLabel", required: false }] }], timesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timesTabLabel", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
34274
34314
|
|
|
34275
34315
|
const DATE_TIME_RANGE_INPUT_IMPORTS = [
|
|
@@ -35149,7 +35189,7 @@ class TimeInputComponent {
|
|
|
35149
35189
|
this.timeInput.focus(options);
|
|
35150
35190
|
}
|
|
35151
35191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-time-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"timeInput.maskPattern()\"\n class=\"et-time-input-field\"\n etTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [value]=\"timeInput.time()\"\n [format]=\"timeInput.effectiveDisplayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"timeInput.minTime()\"\n [max]=\"timeInput.maxTime()\"\n [timeFilter]=\"timeInput.timeFilter()\"\n (valueChange)=\"timeInput.selectTime($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeInputFieldDirective, selector: "input[etTimeInputField]", exportAs: ["etTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
35192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-time-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"timeInput.maskPattern()\"\n class=\"et-time-input-field\"\n etTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [value]=\"timeInput.time()\"\n [disabled]=\"timeInput.disabled()\"\n [format]=\"timeInput.effectiveDisplayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"timeInput.minTime()\"\n [max]=\"timeInput.maxTime()\"\n [timeFilter]=\"timeInput.timeFilter()\"\n (valueChange)=\"timeInput.selectTime($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeInputFieldDirective, selector: "input[etTimeInputField]", exportAs: ["etTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
35153
35193
|
}
|
|
35154
35194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeInputComponent, decorators: [{
|
|
35155
35195
|
type: Component,
|
|
@@ -35193,7 +35233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
35193
35233
|
},
|
|
35194
35234
|
], host: {
|
|
35195
35235
|
class: 'et-time-input',
|
|
35196
|
-
}, template: "<input\n [etInputMask]=\"timeInput.maskPattern()\"\n class=\"et-time-input-field\"\n etTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [value]=\"timeInput.time()\"\n [format]=\"timeInput.effectiveDisplayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"timeInput.minTime()\"\n [max]=\"timeInput.maxTime()\"\n [timeFilter]=\"timeInput.timeFilter()\"\n (valueChange)=\"timeInput.selectTime($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
|
|
35236
|
+
}, template: "<input\n [etInputMask]=\"timeInput.maskPattern()\"\n class=\"et-time-input-field\"\n etTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [value]=\"timeInput.time()\"\n [disabled]=\"timeInput.disabled()\"\n [format]=\"timeInput.effectiveDisplayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"timeInput.minTime()\"\n [max]=\"timeInput.maxTime()\"\n [timeFilter]=\"timeInput.timeFilter()\"\n (valueChange)=\"timeInput.selectTime($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
|
|
35197
35237
|
}], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
35198
35238
|
|
|
35199
35239
|
const TIME_INPUT_IMPORTS = [
|
|
@@ -35369,7 +35409,7 @@ class TimeRangeInputComponent {
|
|
|
35369
35409
|
this.rangeInput.focus(options);
|
|
35370
35410
|
}
|
|
35371
35411
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-time-range-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeRangeInputFieldDirective, selector: "input[etTimeRangeInputField]", exportAs: ["etTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
35412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-time-range-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.calendarRange()\"\n [disabled]=\"rangeInput.disabled()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeRangeInputFieldDirective, selector: "input[etTimeRangeInputField]", exportAs: ["etTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
35373
35413
|
}
|
|
35374
35414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeRangeInputComponent, decorators: [{
|
|
35375
35415
|
type: Component,
|
|
@@ -35419,7 +35459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
35419
35459
|
role: 'group',
|
|
35420
35460
|
'[attr.aria-label]': 'rangeInput.ariaLabel() || null',
|
|
35421
35461
|
'[attr.aria-labelledby]': 'rangeInput.labelId()',
|
|
35422
|
-
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"] }]
|
|
35462
|
+
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-time-range-input-field\"\n etTimeRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n <i etIcon=\"et-clock\"></i>\n </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n <et-time-picker\n [(activeSide)]=\"rangeInput.pickerActiveSide\"\n [rangeValue]=\"rangeInput.calendarRange()\"\n [disabled]=\"rangeInput.disabled()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [min]=\"rangeInput.minTime()\"\n [max]=\"rangeInput.maxTime()\"\n [timeFilter]=\"rangeInput.timeFilter()\"\n [startLabel]=\"startTimeLabel()\"\n [endLabel]=\"endTimeLabel()\"\n (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"] }]
|
|
35423
35463
|
}], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
35424
35464
|
|
|
35425
35465
|
const TIME_RANGE_INPUT_IMPORTS = [
|
|
@@ -47963,7 +48003,7 @@ class SelectDirective extends FieldStateControlDirective {
|
|
|
47963
48003
|
const item = items.find((candidate) => valuesMatch(candidate.value(), entryValue)) ?? null;
|
|
47964
48004
|
const label = item?.label() ||
|
|
47965
48005
|
this.findCachedLabel(cache, entryValue) ||
|
|
47966
|
-
(typeof entryValue === 'string' ? entryValue : null);
|
|
48006
|
+
(typeof entryValue === 'string' && entryValue !== '' ? entryValue : null);
|
|
47967
48007
|
return { value: entryValue, label, item };
|
|
47968
48008
|
});
|
|
47969
48009
|
}, /* @ts-ignore */
|
|
@@ -49932,10 +49972,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
49932
49972
|
|
|
49933
49973
|
class SelectOptionComponent {
|
|
49934
49974
|
constructor() {
|
|
49975
|
+
this.option = inject(SelectOptionDirective);
|
|
49935
49976
|
mountSelectOptionStyles();
|
|
49936
49977
|
}
|
|
49937
49978
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n <ng-content
|
|
49979
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n <ng-content>{{ option.labelInput() }}</ng-content>\n</span>\n\n<span class=\"et-select-option-check\">\n <i etIcon=\"et-check\"></i>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
49939
49980
|
}
|
|
49940
49981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
|
49941
49982
|
type: Component,
|
|
@@ -49946,7 +49987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
49946
49987
|
},
|
|
49947
49988
|
], host: {
|
|
49948
49989
|
class: 'et-select-option',
|
|
49949
|
-
}, template: "<span class=\"et-select-option-label\">\n <ng-content
|
|
49990
|
+
}, template: "<span class=\"et-select-option-label\">\n <ng-content>{{ option.labelInput() }}</ng-content>\n</span>\n\n<span class=\"et-select-option-check\">\n <i etIcon=\"et-check\"></i>\n</span>\n" }]
|
|
49950
49991
|
}], ctorParameters: () => [] });
|
|
49951
49992
|
|
|
49952
49993
|
/**
|
|
@@ -50402,7 +50443,7 @@ class SelectComponent {
|
|
|
50402
50443
|
return () => injector.get(SelectDirective).focus({ preventScroll: true });
|
|
50403
50444
|
},
|
|
50404
50445
|
},
|
|
50405
|
-
], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "options", "options", "compareWith", "compareWith", "valueKey", "valueKey", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "separators", "separators", "normalizeValue", "normalizeValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "loadError", "loadError", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "selectAll", "selectAll", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n @if (select.showLoadingIndicator() && !select.open()) {\n <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n </div>\n }\n</div>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n blur would unmount this button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-picker-trigger et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</ng-template>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n @if (select.showSelectAll()) {\n <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n }\n\n @if (select.options()) {\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item.id()) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (showBusyBar()) {\n <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (showLoadingRow()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n @if (select.showLoadingIndicator()) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n }\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <span\n [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n class=\"et-select-state-content\"\n >\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </span>\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div\n [etProvideColor]=\"panelThemes.themes.error()\"\n class=\"et-select-state et-select-state--error\"\n role=\"alert\"\n >\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n }\n }\n\n @if (select.hasMoreItems() && !showLoadingRow()) {\n @if (showLoadMoreLoading()) {\n <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </div>\n } @else {\n <button\n [disabled]=\"select.loading()\"\n (click)=\"select.requestLoadMore()\"\n class=\"et-select-load-more\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ resolvedLoadMoreLabel() }}\n </button>\n }\n }\n\n @if (select.allowAddNew() && !showLoadingRow()) {\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedAddNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectAllOptionComponent, selector: "et-select-all-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SemanticThemesDirective, selector: "[etSemanticThemes]", exportAs: ["etSemanticThemes"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
50446
|
+
], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "options", "options", "compareWith", "compareWith", "valueKey", "valueKey", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "separators", "separators", "normalizeValue", "normalizeValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "loadError", "loadError", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "selectAll", "selectAll", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"select.displayValue() === null || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n @if (select.showLoadingIndicator() && !select.open()) {\n <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n </div>\n }\n</div>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n blur would unmount this button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-picker-trigger et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</ng-template>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n @if (select.showSelectAll()) {\n <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n }\n\n @if (select.options()) {\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item.id()) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (showBusyBar()) {\n <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (showLoadingRow()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n @if (select.showLoadingIndicator()) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n }\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <span\n [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n class=\"et-select-state-content\"\n >\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </span>\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div\n [etProvideColor]=\"panelThemes.themes.error()\"\n class=\"et-select-state et-select-state--error\"\n role=\"alert\"\n >\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n }\n }\n\n @if (select.hasMoreItems() && !showLoadingRow()) {\n @if (showLoadMoreLoading()) {\n <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </div>\n } @else {\n <button\n [disabled]=\"select.loading()\"\n (click)=\"select.requestLoadMore()\"\n class=\"et-select-load-more\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ resolvedLoadMoreLabel() }}\n </button>\n }\n }\n\n @if (select.allowAddNew() && !showLoadingRow()) {\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedAddNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;min-block-size:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectAllOptionComponent, selector: "et-select-all-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SemanticThemesDirective, selector: "[etSemanticThemes]", exportAs: ["etSemanticThemes"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
50406
50447
|
}
|
|
50407
50448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectComponent, decorators: [{
|
|
50408
50449
|
type: Component,
|
|
@@ -50485,7 +50526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
50485
50526
|
ColorInteractiveDirective,
|
|
50486
50527
|
], host: {
|
|
50487
50528
|
class: 'et-select',
|
|
50488
|
-
}, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n @if (select.showLoadingIndicator() && !select.open()) {\n <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n </div>\n }\n</div>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n blur would unmount this button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-picker-trigger et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</ng-template>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n @if (select.showSelectAll()) {\n <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n }\n\n @if (select.options()) {\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item.id()) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (showBusyBar()) {\n <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (showLoadingRow()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n @if (select.showLoadingIndicator()) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n }\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <span\n [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n class=\"et-select-state-content\"\n >\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </span>\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div\n [etProvideColor]=\"panelThemes.themes.error()\"\n class=\"et-select-state et-select-state--error\"\n role=\"alert\"\n >\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n }\n }\n\n @if (select.hasMoreItems() && !showLoadingRow()) {\n @if (showLoadMoreLoading()) {\n <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </div>\n } @else {\n <button\n [disabled]=\"select.loading()\"\n (click)=\"select.requestLoadMore()\"\n class=\"et-select-load-more\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ resolvedLoadMoreLabel() }}\n </button>\n }\n }\n\n @if (select.allowAddNew() && !showLoadingRow()) {\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedAddNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
|
|
50529
|
+
}, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"select.displayValue() === null || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n @if (select.showLoadingIndicator() && !select.open()) {\n <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n </div>\n }\n</div>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n blur would unmount this button before the click could land -->\n <button\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-clear\"\n animate.enter=\"et-input-clear--enter\"\n animate.leave=\"et-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-input-picker-trigger et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</ng-template>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n @if (select.showSelectAll()) {\n <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n }\n\n @if (select.options()) {\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item.id()) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (showBusyBar()) {\n <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (showLoadingRow()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n @if (select.showLoadingIndicator()) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n }\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <span\n [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n class=\"et-select-state-content\"\n >\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </span>\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div\n [etProvideColor]=\"panelThemes.themes.error()\"\n class=\"et-select-state et-select-state--error\"\n role=\"alert\"\n >\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n }\n }\n\n @if (select.hasMoreItems() && !showLoadingRow()) {\n @if (showLoadMoreLoading()) {\n <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n {{ selectLabels().loading }}\n </div>\n } @else {\n <button\n [disabled]=\"select.loading()\"\n (click)=\"select.requestLoadMore()\"\n class=\"et-select-load-more\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ resolvedLoadMoreLabel() }}\n </button>\n }\n }\n\n @if (select.allowAddNew() && !showLoadingRow()) {\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ resolvedAddNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;min-block-size:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
|
|
50489
50530
|
}], ctorParameters: () => [], propDecorators: { loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], addNewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addNewLabel", required: false }] }], createLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }] } });
|
|
50490
50531
|
|
|
50491
50532
|
const SELECT_IMPORTS = [
|
|
@@ -75878,7 +75919,7 @@ const provideUnsavedChangesAlertDialog = () => provideUnsavedChangesConfirm(() =
|
|
|
75878
75919
|
|
|
75879
75920
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
75880
75921
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
75881
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
75922
|
+
const COMPONENTS_VERSION = '1.0.0-next.68';
|
|
75882
75923
|
|
|
75883
75924
|
/**
|
|
75884
75925
|
* Generated bundle index. Do not edit.
|