@ethlete/components 1.0.0-next.46 → 1.0.0-next.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/fesm2022/ethlete-components.mjs +1424 -405
- package/fesm2022/ethlete-components.mjs.map +1 -1
- package/generators/component/component-names.js +25 -2
- package/generators/component/component-templates.js +1 -1
- package/generators/component/generator.js +1 -1
- package/generators/component/schema.json +35 -0
- package/package.json +1 -1
- package/types/ethlete-components.d.ts +710 -109
|
@@ -19342,7 +19342,9 @@ const FORM_FIELD_CONTROL_TYPES = {
|
|
|
19342
19342
|
DATE_INPUT: 'date-input',
|
|
19343
19343
|
DATE_RANGE_INPUT: 'date-range-input',
|
|
19344
19344
|
TIME_INPUT: 'time-input',
|
|
19345
|
+
TIME_RANGE_INPUT: 'time-range-input',
|
|
19345
19346
|
DATE_TIME_INPUT: 'date-time-input',
|
|
19347
|
+
DATE_TIME_RANGE_INPUT: 'date-time-range-input',
|
|
19346
19348
|
DURATION_INPUT: 'duration-input',
|
|
19347
19349
|
DROPZONE: 'dropzone',
|
|
19348
19350
|
};
|
|
@@ -19462,7 +19464,9 @@ class FormFieldDirective {
|
|
|
19462
19464
|
this.controlType() === FORM_FIELD_CONTROL_TYPES.DATE_INPUT ||
|
|
19463
19465
|
this.controlType() === FORM_FIELD_CONTROL_TYPES.DATE_RANGE_INPUT ||
|
|
19464
19466
|
this.controlType() === FORM_FIELD_CONTROL_TYPES.TIME_INPUT ||
|
|
19467
|
+
this.controlType() === FORM_FIELD_CONTROL_TYPES.TIME_RANGE_INPUT ||
|
|
19465
19468
|
this.controlType() === FORM_FIELD_CONTROL_TYPES.DATE_TIME_INPUT ||
|
|
19469
|
+
this.controlType() === FORM_FIELD_CONTROL_TYPES.DATE_TIME_RANGE_INPUT ||
|
|
19466
19470
|
this.controlType() === FORM_FIELD_CONTROL_TYPES.DURATION_INPUT, /* @ts-ignore */
|
|
19467
19471
|
...(ngDevMode ? [{ debugName: "usesTextFieldShell" }] : /* istanbul ignore next */ []));
|
|
19468
19472
|
this.shouldFloatLabel = computed(() => this.focused() || this.expanded() || this.hasValue(), /* @ts-ignore */
|
|
@@ -22265,13 +22269,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
22265
22269
|
*/
|
|
22266
22270
|
class SelectionCardStylesComponent {
|
|
22267
22271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectionCardStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SelectionCardStylesComponent, isStandalone: true, selector: "et-selection-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-selection-card-padding{syntax: \"*\"; inherits: true; initial-value: 16px;}@property --et-selection-card-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-selection-card-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-selection-card-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-selection-card-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}.et-selection-card{
|
|
22272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SelectionCardStylesComponent, isStandalone: true, selector: "et-selection-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-selection-card-padding{syntax: \"*\"; inherits: true; initial-value: 16px;}@property --et-selection-card-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-selection-card-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-selection-card-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-selection-card-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-selection-card-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}.et-selection-card{justify-content:space-between;align-items:center;padding:var(--et-selection-card-padding);border-radius:var(--et-selection-card-border-radius);background-color:var(--et-surface-background-solid, transparent);border:var(--et-selection-card-border-width) solid var(--et-surface-border-solid, currentColor)}@media(hover:hover){.et-selection-card:where(:hover:not([aria-disabled=true],[data-readonly]):not(:has([aria-disabled=true],[data-readonly]))){border-color:var(--et-surface-interaction-hover-solid, currentColor)}}.et-selection-card:where(:active:not([aria-disabled=true],[data-readonly]):not(:has([aria-disabled=true],[data-readonly]))){border-color:var(--et-surface-interaction-active-solid, currentColor)}.et-selection-card:where([aria-checked=true],:has(:is([aria-checked=true],[aria-checked=mixed]))){border-color:var(--et-theme-color-primary-solid, currentColor)}.et-selection-card:where(:focus-visible,:has(:focus-visible)){border-color:var(--et-theme-color-primary-solid, currentColor);outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-selection-card .et-selection-card-content{flex:1;min-inline-size:0}.et-selection-card .et-selection-card-control{order:1}.et-selection-card [etSelectionCardLeading],.et-selection-card [etSelectionCardTrailing]{flex-shrink:0}.et-selection-card>.et-icon{inline-size:var(--et-selection-card-icon-size);block-size:var(--et-selection-card-icon-size)}.et-selection-card .et-selection-card-label{font-weight:500;color:var(--et-surface-color-muted-solid, currentColor)}.et-selection-card:where([aria-checked=true],:has(:is([aria-checked=true],[aria-checked=mixed]))) .et-selection-card-label{color:var(--et-surface-color-solid, currentColor)}.et-selection-card:active:not([aria-disabled=true]):not([data-readonly]) .et-selection-card-control{transform:none}.et-selection-card:focus-visible .et-selection-card-control{outline:none}.et-selection-card:where([data-control-position=start]) .et-selection-card-control,:where([data-control-position=start]) .et-selection-card .et-selection-card-control{order:0}.et-selection-card:where([data-can-animate]),:where([data-can-animate]) .et-selection-card{transition:border-color var(--et-selection-card-transition-duration) ease,background-color var(--et-selection-card-transition-duration) ease}:is(.et-selection-card:where([data-can-animate]),:where([data-can-animate]) .et-selection-card) .et-selection-card-label{transition:color var(--et-selection-card-transition-duration) ease}@media(prefers-reduced-motion:reduce){.et-selection-card{--et-selection-card-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22269
22273
|
}
|
|
22270
22274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectionCardStylesComponent, decorators: [{
|
|
22271
22275
|
type: Component,
|
|
22272
|
-
args: [{ selector: 'et-selection-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-selection-card-padding{syntax: \"*\"; inherits: true; initial-value: 16px;}@property --et-selection-card-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-selection-card-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-selection-card-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-selection-card-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}.et-selection-card{
|
|
22276
|
+
args: [{ selector: 'et-selection-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-selection-card-padding{syntax: \"*\"; inherits: true; initial-value: 16px;}@property --et-selection-card-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-selection-card-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-selection-card-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-selection-card-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-selection-card-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}.et-selection-card{justify-content:space-between;align-items:center;padding:var(--et-selection-card-padding);border-radius:var(--et-selection-card-border-radius);background-color:var(--et-surface-background-solid, transparent);border:var(--et-selection-card-border-width) solid var(--et-surface-border-solid, currentColor)}@media(hover:hover){.et-selection-card:where(:hover:not([aria-disabled=true],[data-readonly]):not(:has([aria-disabled=true],[data-readonly]))){border-color:var(--et-surface-interaction-hover-solid, currentColor)}}.et-selection-card:where(:active:not([aria-disabled=true],[data-readonly]):not(:has([aria-disabled=true],[data-readonly]))){border-color:var(--et-surface-interaction-active-solid, currentColor)}.et-selection-card:where([aria-checked=true],:has(:is([aria-checked=true],[aria-checked=mixed]))){border-color:var(--et-theme-color-primary-solid, currentColor)}.et-selection-card:where(:focus-visible,:has(:focus-visible)){border-color:var(--et-theme-color-primary-solid, currentColor);outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-selection-card .et-selection-card-content{flex:1;min-inline-size:0}.et-selection-card .et-selection-card-control{order:1}.et-selection-card [etSelectionCardLeading],.et-selection-card [etSelectionCardTrailing]{flex-shrink:0}.et-selection-card>.et-icon{inline-size:var(--et-selection-card-icon-size);block-size:var(--et-selection-card-icon-size)}.et-selection-card .et-selection-card-label{font-weight:500;color:var(--et-surface-color-muted-solid, currentColor)}.et-selection-card:where([aria-checked=true],:has(:is([aria-checked=true],[aria-checked=mixed]))) .et-selection-card-label{color:var(--et-surface-color-solid, currentColor)}.et-selection-card:active:not([aria-disabled=true]):not([data-readonly]) .et-selection-card-control{transform:none}.et-selection-card:focus-visible .et-selection-card-control{outline:none}.et-selection-card:where([data-control-position=start]) .et-selection-card-control,:where([data-control-position=start]) .et-selection-card .et-selection-card-control{order:0}.et-selection-card:where([data-can-animate]),:where([data-can-animate]) .et-selection-card{transition:border-color var(--et-selection-card-transition-duration) ease,background-color var(--et-selection-card-transition-duration) ease}:is(.et-selection-card:where([data-can-animate]),:where([data-can-animate]) .et-selection-card) .et-selection-card-label{transition:color var(--et-selection-card-transition-duration) ease}@media(prefers-reduced-motion:reduce){.et-selection-card{--et-selection-card-transition-duration: 1ms}}}\n"] }]
|
|
22273
22277
|
}] });
|
|
22274
22278
|
|
|
22279
|
+
/** Which end of a card the control sits at. See {@link SelectionCardControlPosition}. */
|
|
22280
|
+
const SELECTION_CARD_CONTROL_POSITIONS = {
|
|
22281
|
+
START: 'start',
|
|
22282
|
+
END: 'end',
|
|
22283
|
+
};
|
|
22284
|
+
|
|
22275
22285
|
const FORM_ERROR_MESSAGE_RESOLVER = new InjectionToken('FORM_ERROR_MESSAGE_RESOLVER');
|
|
22276
22286
|
const provideFormErrorMessageResolver = (resolver) => ({
|
|
22277
22287
|
provide: FORM_ERROR_MESSAGE_RESOLVER,
|
|
@@ -22366,6 +22376,13 @@ class ChoiceFieldComponent {
|
|
|
22366
22376
|
*/
|
|
22367
22377
|
this.variant = input(CHOICE_FIELD_VARIANTS.PLAIN, /* @ts-ignore */
|
|
22368
22378
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
22379
|
+
/**
|
|
22380
|
+
* Which end of the card the control sits at. `'end'` keeps the label leading and the control trailing;
|
|
22381
|
+
* `'start'` puts the control first, ahead of any `[etSelectionCardLeading]` media. Only `variant="card"`
|
|
22382
|
+
* reads it. @default 'end'
|
|
22383
|
+
*/
|
|
22384
|
+
this.controlPosition = input(SELECTION_CARD_CONTROL_POSITIONS.END, /* @ts-ignore */
|
|
22385
|
+
...(ngDevMode ? [{ debugName: "controlPosition" }] : /* istanbul ignore next */ []));
|
|
22369
22386
|
this.errorContentRef = viewChild('errorContent', /* @ts-ignore */
|
|
22370
22387
|
...(ngDevMode ? [{ debugName: "errorContentRef" }] : /* istanbul ignore next */ []));
|
|
22371
22388
|
this.warningContentRef = viewChild('warningContent', /* @ts-ignore */
|
|
@@ -22395,7 +22412,7 @@ class ChoiceFieldComponent {
|
|
|
22395
22412
|
});
|
|
22396
22413
|
}
|
|
22397
22414
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChoiceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ChoiceFieldComponent, isStandalone: true, selector: "et-choice-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-choice-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div\n [class.et-selection-card]=\"variant() === 'card'\"\n class=\"et-choice-field-control\"\n etColorInteractive\n etColorInteractiveContainer\n>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area et-selection-card-content\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.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 [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.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 [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}@media(hover:hover){et-choice-field:where(:has(.et-choice-field-control:hover)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}}et-choice-field:where(:has(.et-choice-field-control:active)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has([data-readonly])) .et-choice-field-label-area{cursor:default}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveContainerDirective, selector: "[etColorInteractiveContainer]" }, { kind: "directive", type: ColorInteractiveDirective, selector: "[etColorInteractive]" }, { 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: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22415
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ChoiceFieldComponent, isStandalone: true, selector: "et-choice-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, controlPosition: { classPropertyName: "controlPosition", publicName: "controlPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-control-position": "variant() === 'card' ? controlPosition() : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-choice-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<div\n [class.et-selection-card]=\"variant() === 'card'\"\n class=\"et-choice-field-control\"\n etColorInteractive\n etColorInteractiveContainer\n>\n <div class=\"et-choice-field-control-slot et-selection-card-control\">\n <ng-content />\n </div>\n\n <ng-content select=\"[etSelectionCardLeading]\" />\n\n <div class=\"et-choice-field-label-area et-selection-card-content\">\n <ng-content select=\"et-label\" />\n </div>\n\n <ng-content select=\"[etSelectionCardTrailing]\" />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.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 [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.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 [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}@media(hover:hover){et-choice-field:where(:has(.et-choice-field-control:hover)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}}et-choice-field:where(:has(.et-choice-field-control:active)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has([data-readonly])) .et-choice-field-label-area{cursor:default}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveContainerDirective, selector: "[etColorInteractiveContainer]" }, { kind: "directive", type: ColorInteractiveDirective, selector: "[etColorInteractive]" }, { 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: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22399
22416
|
}
|
|
22400
22417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ChoiceFieldComponent, decorators: [{
|
|
22401
22418
|
type: Component,
|
|
@@ -22411,11 +22428,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
22411
22428
|
class: 'et-choice-field',
|
|
22412
22429
|
'[attr.data-size]': 'size()',
|
|
22413
22430
|
'[attr.data-variant]': 'variant()',
|
|
22431
|
+
'[attr.data-control-position]': "variant() === 'card' ? controlPosition() : null",
|
|
22414
22432
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
22415
22433
|
'[attr.data-error]': 'support.displaysError() || null',
|
|
22416
22434
|
'[attr.data-warning]': 'support.displaysWarning() || null',
|
|
22417
|
-
}, template: "<div\n [class.et-selection-card]=\"variant() === 'card'\"\n class=\"et-choice-field-control\"\n etColorInteractive\n etColorInteractiveContainer\n>\n <div class=\"et-choice-field-control-slot\">\n <ng-content />\n </div>\n\n <div class=\"et-choice-field-label-area et-selection-card-content\">\n <ng-content select=\"et-label\" />\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.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 [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.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 [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}@media(hover:hover){et-choice-field:where(:has(.et-choice-field-control:hover)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}}et-choice-field:where(:has(.et-choice-field-control:active)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has([data-readonly])) .et-choice-field-label-area{cursor:default}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"] }]
|
|
22418
|
-
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContentRef: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatableRef: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
22435
|
+
}, template: "<div\n [class.et-selection-card]=\"variant() === 'card'\"\n class=\"et-choice-field-control\"\n etColorInteractive\n etColorInteractiveContainer\n>\n <div class=\"et-choice-field-control-slot et-selection-card-control\">\n <ng-content />\n </div>\n\n <ng-content select=\"[etSelectionCardLeading]\" />\n\n <div class=\"et-choice-field-label-area et-selection-card-content\">\n <ng-content select=\"et-label\" />\n </div>\n\n <ng-content select=\"[etSelectionCardTrailing]\" />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-choice-field-support\" etColorInteractiveExclude>\n <div class=\"et-choice-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"support.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 [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.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 [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-choice-field-support-content et-choice-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]=\"support.formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-choice-field-support-content et-choice-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-choice-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-choice-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-choice-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-choice-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-choice-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-choice-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-choice-field{display:flex;flex-direction:column;width:fit-content;gap:4px;color:var(--et-surface-color-solid, currentColor)}et-choice-field .et-choice-field-control{display:flex;align-items:center;gap:var(--et-choice-field-gap)}et-choice-field .et-choice-field-control-slot{flex:0 0 auto}et-choice-field:where([data-size=sm]){--et-choice-field-label-font-size: 12px}et-choice-field:where([data-size=sm]) et-checkbox{--et-checkbox-size: 16px}et-choice-field:where([data-size=sm]) et-switch{--et-switch-track-width: 34px;--et-switch-track-height: 19px;--et-switch-thumb-size: 13px}et-choice-field:where([data-size=lg]){--et-choice-field-label-font-size: 16px}et-choice-field:where([data-size=lg]) et-checkbox{--et-checkbox-size: 24px}et-choice-field:where([data-size=lg]) et-switch{--et-switch-track-width: 46px;--et-switch-track-height: 25px;--et-switch-thumb-size: 19px}et-choice-field .et-choice-field-label-area{display:flex;align-items:baseline;font-size:var(--et-choice-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;-webkit-user-select:none;user-select:none;min-inline-size:0;flex:1;overflow:hidden;transition:color .15s ease,opacity .15s ease}et-choice-field .et-choice-field-label-area et-label{display:inline;min-inline-size:0}@media(hover:hover){et-choice-field:where(:has(.et-choice-field-control:hover)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}}et-choice-field:where(:has(.et-choice-field-control:active)):where(:not(:has([data-readonly]))) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:where(:has([data-readonly])) .et-choice-field-label-area{cursor:default}et-choice-field:where(:has(:focus-visible)) .et-choice-field-label-area{color:var(--et-surface-color-solid, currentColor)}et-choice-field:has([aria-disabled=true]) .et-choice-field-label-area,et-choice-field:has(:disabled) .et-choice-field-label-area{cursor:not-allowed;color:var(--et-surface-interaction-disabled-solid, currentColor);pointer-events:none}et-choice-field:has([aria-disabled=true]) .et-choice-field-hint,et-choice-field:has(:disabled) .et-choice-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-choice-field .et-choice-field-support{overflow:clip;block-size:0;-webkit-user-select:none;user-select:none}et-choice-field .et-choice-field-support-stack{position:relative;display:grid}et-choice-field .et-choice-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-choice-field .et-choice-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-choice-field .et-choice-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-choice-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(var(--et-choice-field-support-offset))}et-choice-field .et-choice-field-hint{font-size:var(--et-choice-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}et-choice-field .et-choice-field-hint:empty{display:none}et-choice-field[data-can-animate] .et-choice-field-support{transition:block-size var(--et-choice-field-support-duration) ease}et-choice-field[data-can-animate] .et-choice-field-support-content{transition:opacity var(--et-choice-field-support-duration) ease,transform var(--et-choice-field-support-duration) ease,color .15s ease}@starting-style{et-choice-field[data-can-animate] .et-choice-field-errors[data-active]{opacity:0;transform:translateY(var(--et-choice-field-support-offset))}}@starting-style{et-choice-field[data-can-animate] .et-choice-field-hint[data-active]{opacity:0;transform:translateY(calc(-1 * var(--et-choice-field-support-offset)))}}}\n"] }]
|
|
22436
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }], errorContentRef: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContentRef: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContentRef: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], errorAnimatableRef: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatableRef: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatableRef: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
22419
22437
|
|
|
22420
22438
|
class HintComponent {
|
|
22421
22439
|
constructor() {
|
|
@@ -22444,7 +22462,66 @@ const HEX_PATTERNS = {
|
|
|
22444
22462
|
// devtools. Alpha may be a number or a percentage; the channels are range-checked below, because a
|
|
22445
22463
|
// pattern that also enforced 0-255 would be unreadable.
|
|
22446
22464
|
const RGB_PATTERN = /^rgba?\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/i;
|
|
22465
|
+
const HEX_CHANNEL_PATTERN = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
|
|
22447
22466
|
const isBlank = (value) => value === null || value.trim().length === 0;
|
|
22467
|
+
const parseColor = (value) => {
|
|
22468
|
+
if (isBlank(value))
|
|
22469
|
+
return null;
|
|
22470
|
+
const raw = value.trim();
|
|
22471
|
+
if (HEX_CHANNEL_PATTERN.test(raw)) {
|
|
22472
|
+
const digits = raw.slice(1);
|
|
22473
|
+
const expanded = digits.length < 6 ? digits.replace(/./g, (digit) => digit + digit) : digits;
|
|
22474
|
+
const channelAt = (index) => parseInt(expanded.slice(index * 2, index * 2 + 2), 16);
|
|
22475
|
+
return [channelAt(0), channelAt(1), channelAt(2)];
|
|
22476
|
+
}
|
|
22477
|
+
const match = RGB_PATTERN.exec(raw);
|
|
22478
|
+
if (!match)
|
|
22479
|
+
return null;
|
|
22480
|
+
const [, red, green, blue] = match;
|
|
22481
|
+
const channels = [Number(red), Number(green), Number(blue)];
|
|
22482
|
+
return channels.every((channel) => channel <= 255) ? channels : null;
|
|
22483
|
+
};
|
|
22484
|
+
const linearize = (channel) => {
|
|
22485
|
+
const srgb = channel / 255;
|
|
22486
|
+
return srgb <= 0.03928 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
|
|
22487
|
+
};
|
|
22488
|
+
const relativeLuminance = ([red, green, blue]) => 0.2126 * linearize(red) + 0.7152 * linearize(green) + 0.0722 * linearize(blue);
|
|
22489
|
+
/** The ratios WCAG 2.2 asks for, so a call site can name the rule instead of repeating the number. */
|
|
22490
|
+
const WCAG_CONTRAST_RATIOS = {
|
|
22491
|
+
/** 1.4.3 Contrast (Minimum), text under 18.66px / 24px bold. */
|
|
22492
|
+
aaNormal: 4.5,
|
|
22493
|
+
/** 1.4.3 Contrast (Minimum), text at or above 18.66px / 24px bold. */
|
|
22494
|
+
aaLarge: 3,
|
|
22495
|
+
/** 1.4.6 Contrast (Enhanced), text under 18.66px / 24px bold. */
|
|
22496
|
+
aaaNormal: 7,
|
|
22497
|
+
/** 1.4.6 Contrast (Enhanced), text at or above 18.66px / 24px bold. */
|
|
22498
|
+
aaaLarge: 4.5,
|
|
22499
|
+
/** 1.4.11 Non-text Contrast: icons, control borders, focus rings, chart marks. */
|
|
22500
|
+
nonText: 3,
|
|
22501
|
+
};
|
|
22502
|
+
/**
|
|
22503
|
+
* The WCAG contrast ratio between two colors, as the `n` in `n:1` - 1 for a color against itself,
|
|
22504
|
+
* 21 for black against white. Accepts hex (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`) and functional
|
|
22505
|
+
* `rgb()`/`rgba()` in either the comma or the space form, and returns `null` if either color is
|
|
22506
|
+
* blank or unparseable.
|
|
22507
|
+
*
|
|
22508
|
+
* **Alpha is ignored**: the result is for the two colors at full opacity, because compositing a
|
|
22509
|
+
* translucent color needs a backdrop this function is not given.
|
|
22510
|
+
*
|
|
22511
|
+
* ```ts
|
|
22512
|
+
* getColorContrastRatio('#767676', '#ffffff'); // 4.54
|
|
22513
|
+
* ```
|
|
22514
|
+
*/
|
|
22515
|
+
const getColorContrastRatio = (color, other) => {
|
|
22516
|
+
const first = parseColor(color);
|
|
22517
|
+
const second = parseColor(other);
|
|
22518
|
+
if (!first || !second)
|
|
22519
|
+
return null;
|
|
22520
|
+
const luminances = [relativeLuminance(first), relativeLuminance(second)];
|
|
22521
|
+
const lighter = Math.max(...luminances);
|
|
22522
|
+
const darker = Math.min(...luminances);
|
|
22523
|
+
return (lighter + 0.05) / (darker + 0.05);
|
|
22524
|
+
};
|
|
22448
22525
|
/**
|
|
22449
22526
|
* Signal-forms validator: fails the field unless the value is a hex color. Strict `#rrggbb` by
|
|
22450
22527
|
* default - the notation `et-color-input` itself produces and documents - so a value that arrived
|
|
@@ -22511,6 +22588,48 @@ const rgbColor = (path, { allowAlpha, message } = {}) => validate(path, ({ value
|
|
|
22511
22588
|
const inRange = [red, green, blue].every((channel) => Number(channel) <= 255);
|
|
22512
22589
|
return inRange ? undefined : fail;
|
|
22513
22590
|
});
|
|
22591
|
+
/**
|
|
22592
|
+
* Signal-forms rule: reports the field while its color does not reach `min` contrast against
|
|
22593
|
+
* another color - a second field of the same form (`against: s.background`) or a fixed color
|
|
22594
|
+
* (`against: '#ffffff'`). The one cross-field rule the library ships; `validate`'s context resolves
|
|
22595
|
+
* the other path, so the two fields need no wiring beyond sharing a `form()`.
|
|
22596
|
+
*
|
|
22597
|
+
* `severity: 'warning'` routes the same check through {@link warn} instead, which leaves the field
|
|
22598
|
+
* valid and lets `submit()` through - the right choice when the color is a brand decision rather
|
|
22599
|
+
* than a rule. Either way it reports `kind: 'colorContrast'`.
|
|
22600
|
+
*
|
|
22601
|
+
* Passes while **either** color is blank or unparseable, so it never doubles up on `required()` or
|
|
22602
|
+
* on {@link hexColor}. Alpha is ignored - see {@link getColorContrastRatio}.
|
|
22603
|
+
*
|
|
22604
|
+
* ```ts
|
|
22605
|
+
* form(model, (s) => {
|
|
22606
|
+
* colorContrast(s.textColor, { against: s.backgroundColor });
|
|
22607
|
+
* colorContrast(s.iconColor, { against: s.backgroundColor, min: WCAG_CONTRAST_RATIOS.nonText });
|
|
22608
|
+
* colorContrast(s.brandColor, { against: '#ffffff', severity: 'warning' });
|
|
22609
|
+
* colorContrast(s.headingColor, {
|
|
22610
|
+
* against: s.backgroundColor,
|
|
22611
|
+
* min: ({ valueOf }) => (valueOf(s.largeText) ? WCAG_CONTRAST_RATIOS.aaLarge : WCAG_CONTRAST_RATIOS.aaNormal),
|
|
22612
|
+
* });
|
|
22613
|
+
* });
|
|
22614
|
+
* ```
|
|
22615
|
+
*/
|
|
22616
|
+
const colorContrast = (path, { against, min = WCAG_CONTRAST_RATIOS.aaNormal, severity = 'error', message }) => {
|
|
22617
|
+
const check = (ctx) => {
|
|
22618
|
+
const other = typeof against === 'string' ? against : ctx.valueOf(against);
|
|
22619
|
+
const ratio = getColorContrastRatio(ctx.value(), other);
|
|
22620
|
+
const required = typeof min === 'number' ? min : min(ctx);
|
|
22621
|
+
if (ratio === null || ratio >= required)
|
|
22622
|
+
return null;
|
|
22623
|
+
// Floored, not rounded: a 4.49 reported as "4.5:1, needs at least 4.5:1" reads as a bug.
|
|
22624
|
+
const measured = Math.floor(ratio * 100) / 100;
|
|
22625
|
+
return { kind: 'colorContrast', message: message ?? `Contrast is ${measured}:1, needs at least ${required}:1` };
|
|
22626
|
+
};
|
|
22627
|
+
if (severity === 'warning') {
|
|
22628
|
+
warn(path, check);
|
|
22629
|
+
return;
|
|
22630
|
+
}
|
|
22631
|
+
validate(path, (ctx) => check(ctx) ?? undefined);
|
|
22632
|
+
};
|
|
22514
22633
|
|
|
22515
22634
|
class ColorInputDirective extends TextFieldControlDirective {
|
|
22516
22635
|
constructor() {
|
|
@@ -23066,14 +23185,27 @@ const DEFAULT_DATE_TIME_LABELS = {
|
|
|
23066
23185
|
openTimePicker: 'Open time picker',
|
|
23067
23186
|
openDateTimePicker: 'Open date & time picker',
|
|
23068
23187
|
chooseDate: 'Choose a date',
|
|
23188
|
+
chooseTime: 'Choose a time',
|
|
23189
|
+
chooseDateTime: 'Choose a date and time',
|
|
23190
|
+
chooseDateRange: 'Choose a date range',
|
|
23191
|
+
chooseTimeRange: 'Choose a time range',
|
|
23192
|
+
chooseDateTimeRange: 'Choose a date and time range',
|
|
23069
23193
|
startDate: 'Start date',
|
|
23070
23194
|
endDate: 'End date',
|
|
23195
|
+
startTime: 'Start time',
|
|
23196
|
+
endTime: 'End time',
|
|
23197
|
+
startDateTime: 'Start date and time',
|
|
23198
|
+
endDateTime: 'End date and time',
|
|
23071
23199
|
dateTab: 'Date',
|
|
23072
23200
|
timeTab: 'Time',
|
|
23201
|
+
datesTab: 'Dates',
|
|
23202
|
+
timesTab: 'Times',
|
|
23073
23203
|
invalidDate: 'Please enter a valid date',
|
|
23074
23204
|
invalidTime: 'Please enter a valid time',
|
|
23075
23205
|
invalidDateTime: 'Please enter a valid date and time',
|
|
23076
23206
|
invalidDateRange: 'Please enter a valid date range',
|
|
23207
|
+
invalidTimeRange: 'Please enter a valid time range',
|
|
23208
|
+
invalidDateTimeRange: 'Please enter a valid date and time range',
|
|
23077
23209
|
invalidDuration: 'Please enter a valid duration',
|
|
23078
23210
|
};
|
|
23079
23211
|
const DATE_TIME_LABELS_DEF = /* @__PURE__ */ defineLabels('DATE_TIME_LABELS', DEFAULT_DATE_TIME_LABELS);
|
|
@@ -23914,6 +24046,8 @@ class DateInputComponent {
|
|
|
23914
24046
|
this.dateInput = inject(DateInputDirective);
|
|
23915
24047
|
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
23916
24048
|
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
24049
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
24050
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
23917
24051
|
/** Shows a clear (×) control while a value or pending text is set and the field is in use. */
|
|
23918
24052
|
this.clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
23919
24053
|
this.clearLabel = input(null, /* @ts-ignore */
|
|
@@ -23921,6 +24055,9 @@ class DateInputComponent {
|
|
|
23921
24055
|
/** The string in effect: this instance's `pickerTriggerLabel`, else the domain's label set. */
|
|
23922
24056
|
this.resolvedPickerTriggerLabel = computed(() => this.pickerTriggerLabel() ?? this.dateTimeLabels().openCalendar, /* @ts-ignore */
|
|
23923
24057
|
...(ngDevMode ? [{ debugName: "resolvedPickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
24058
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
24059
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseDate, /* @ts-ignore */
|
|
24060
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
23924
24061
|
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
23925
24062
|
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
23926
24063
|
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -23937,7 +24074,7 @@ class DateInputComponent {
|
|
|
23937
24074
|
this.dateInput.clearValue();
|
|
23938
24075
|
}
|
|
23939
24076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateInputComponent, isStandalone: true, selector: "et-date-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", 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-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateInputDirective, 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", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"dateInput.maskPattern()\"\n class=\"et-date-input-field\"\n etDateInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
24077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateInputComponent, isStandalone: true, selector: "et-date-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", 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-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateInputDirective, 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", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [etInputMask]=\"dateInput.maskPattern()\"\n class=\"et-date-input-field\"\n etDateInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 <et-calendar\n [value]=\"dateInput.date()\"\n [min]=\"dateInput.minDate()\"\n [max]=\"dateInput.maxDate()\"\n [dateFilter]=\"dateInput.dateFilter()\"\n [startAt]=\"dateInput.startAt()\"\n [precision]=\"dateInput.precision()\"\n [startView]=\"dateInput.startView()\"\n [dateClass]=\"dateInput.dateClass()\"\n [weekNumbers]=\"dateInput.weekNumbers()\"\n [locale]=\"dateInput.effectiveLocale()\"\n (valueChange)=\"dateInput.selectDate($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-input .et-date-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-date-input .et-date-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-input .et-date-input-field:disabled{cursor:not-allowed}et-date-input[data-mixed] .et-date-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: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "directive", type: DateInputFieldDirective, selector: "input[etDateInputField]", exportAs: ["etDateInputField"] }, { 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 }); }
|
|
23941
24078
|
}
|
|
23942
24079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
23943
24080
|
type: Component,
|
|
@@ -23984,8 +24121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
23984
24121
|
},
|
|
23985
24122
|
], host: {
|
|
23986
24123
|
class: 'et-date-input',
|
|
23987
|
-
}, template: "<input\n [etInputMask]=\"dateInput.maskPattern()\"\n class=\"et-date-input-field\"\n etDateInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
23988
|
-
}], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
24124
|
+
}, template: "<input\n [etInputMask]=\"dateInput.maskPattern()\"\n class=\"et-date-input-field\"\n etDateInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 <et-calendar\n [value]=\"dateInput.date()\"\n [min]=\"dateInput.minDate()\"\n [max]=\"dateInput.maxDate()\"\n [dateFilter]=\"dateInput.dateFilter()\"\n [startAt]=\"dateInput.startAt()\"\n [precision]=\"dateInput.precision()\"\n [startView]=\"dateInput.startView()\"\n [dateClass]=\"dateInput.dateClass()\"\n [weekNumbers]=\"dateInput.weekNumbers()\"\n [locale]=\"dateInput.effectiveLocale()\"\n (valueChange)=\"dateInput.selectDate($event)\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-input .et-date-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-date-input .et-date-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-input .et-date-input-field:disabled{cursor:not-allowed}et-date-input[data-mixed] .et-date-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
|
|
24125
|
+
}], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
23989
24126
|
|
|
23990
24127
|
const DATE_INPUT_IMPORTS = [
|
|
23991
24128
|
DateInputComponent,
|
|
@@ -24001,21 +24138,205 @@ const DATE_RANGE_INPUT_ERROR_CODES = {
|
|
|
24001
24138
|
};
|
|
24002
24139
|
|
|
24003
24140
|
/**
|
|
24004
|
-
*
|
|
24005
|
-
*
|
|
24006
|
-
*
|
|
24007
|
-
*
|
|
24141
|
+
* Shared text field for the range picker inputs' two sides (`input[etDateRangeInputField]`,
|
|
24142
|
+
* `input[etDateTimeRangeInputField]`): shows the committed side value in the display format, commits
|
|
24143
|
+
* typed text on blur/Enter, keeps unparseable text visible, and opens the picker on Alt+ArrowDown.
|
|
24144
|
+
* Each side is its own `INPUT_MASK_HOST`, so a typing mask's guide only shows on the focused one.
|
|
24145
|
+
*
|
|
24146
|
+
* Must be extended by an `@Directive` - subclasses inject their range directive into `rangeInput` and
|
|
24147
|
+
* provide `INPUT_MASK_HOST` via `useExisting`.
|
|
24008
24148
|
*/
|
|
24009
|
-
class
|
|
24149
|
+
class DateRangePickerInputFieldDirective {
|
|
24150
|
+
constructor() {
|
|
24151
|
+
this.elementRef = inject(ElementRef);
|
|
24152
|
+
this.destroyRef = inject(DestroyRef);
|
|
24153
|
+
/** Which end of the range this field edits. */
|
|
24154
|
+
this.side = input.required(/* @ts-ignore */
|
|
24155
|
+
...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
24156
|
+
/** Set while an `[etInputMask]` owns this field's element text and value-sync. */
|
|
24157
|
+
this.maskAttached = signal(false, /* @ts-ignore */
|
|
24158
|
+
...(ngDevMode ? [{ debugName: "maskAttached" }] : /* istanbul ignore next */ []));
|
|
24159
|
+
/**
|
|
24160
|
+
* This side's field text as an attached mask sees it (`InputMaskHost.value`):
|
|
24161
|
+
* display-shaped, never containing guide placeholders. Mask edits write it while
|
|
24162
|
+
* typing; every commit resets it to the committed display text (or the kept
|
|
24163
|
+
* unparseable text), which also carries the committed value into a focus.
|
|
24164
|
+
*/
|
|
24165
|
+
this.value = linkedSignal(() => {
|
|
24166
|
+
const rangeInput = this.rangeInput;
|
|
24167
|
+
if (!rangeInput) {
|
|
24168
|
+
return '';
|
|
24169
|
+
}
|
|
24170
|
+
return this.mirrorText(rangeInput);
|
|
24171
|
+
}, /* @ts-ignore */
|
|
24172
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
24173
|
+
/** Whether this side's field has focus (`InputMaskHost.focused`) - drives the mask's guide display. */
|
|
24174
|
+
this.focused = computed(() => this.rangeInput?.focusedSide() === this.side(), /* @ts-ignore */
|
|
24175
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
24176
|
+
/** The native element an attached mask rewrites (`InputMaskHost.nativeControl`). */
|
|
24177
|
+
this.nativeControl = signal(null, /* @ts-ignore */
|
|
24178
|
+
...(ngDevMode ? [{ debugName: "nativeControl" }] : /* istanbul ignore next */ []));
|
|
24179
|
+
this.nativeControl.set(this.elementRef.nativeElement);
|
|
24180
|
+
// the side input is not available at construction time - register reactively
|
|
24181
|
+
effect((onCleanup) => {
|
|
24182
|
+
const rangeInput = this.rangeInput;
|
|
24183
|
+
if (!rangeInput) {
|
|
24184
|
+
return;
|
|
24185
|
+
}
|
|
24186
|
+
const side = this.side();
|
|
24187
|
+
rangeInput.registerField(side, this);
|
|
24188
|
+
onCleanup(() => rangeInput.unregisterField(side, this));
|
|
24189
|
+
});
|
|
24190
|
+
// while unfocused the element mirrors the committed side value (or the kept
|
|
24191
|
+
// unparseable text); mid-typing rewrites would fight the caret. An attached
|
|
24192
|
+
// mask owns the element text instead and renders the same mirror itself
|
|
24193
|
+
effect(() => {
|
|
24194
|
+
const rangeInput = this.rangeInput;
|
|
24195
|
+
if (!rangeInput || this.maskAttached()) {
|
|
24196
|
+
return;
|
|
24197
|
+
}
|
|
24198
|
+
const text = this.mirrorText(rangeInput);
|
|
24199
|
+
if (rangeInput.focusedSide() !== this.side() && this.elementRef.nativeElement.value !== text) {
|
|
24200
|
+
this.elementRef.nativeElement.value = text;
|
|
24201
|
+
}
|
|
24202
|
+
});
|
|
24203
|
+
// masked typing bypasses handleInput, so mirror the mask-written text into
|
|
24204
|
+
// the side's inputText - hasValue (and the clear affordance) must react like
|
|
24205
|
+
// native typing
|
|
24206
|
+
effect(() => {
|
|
24207
|
+
if (!this.maskAttached()) {
|
|
24208
|
+
return;
|
|
24209
|
+
}
|
|
24210
|
+
const text = this.value();
|
|
24211
|
+
const rangeInput = this.rangeInput;
|
|
24212
|
+
const side = this.side();
|
|
24213
|
+
if (rangeInput && untracked(() => rangeInput.focusedSide()) === side) {
|
|
24214
|
+
untracked(() => rangeInput.setInputText(side, text));
|
|
24215
|
+
}
|
|
24216
|
+
});
|
|
24217
|
+
this.destroyRef.onDestroy(() => {
|
|
24218
|
+
if (this.rangeInput?.focusedSide() === this.side()) {
|
|
24219
|
+
this.rangeInput.focusedSide.set(null);
|
|
24220
|
+
}
|
|
24221
|
+
});
|
|
24222
|
+
}
|
|
24223
|
+
/** @internal */
|
|
24224
|
+
focus() {
|
|
24225
|
+
this.elementRef.nativeElement.focus({ preventScroll: true });
|
|
24226
|
+
}
|
|
24227
|
+
/** @internal `InputMaskHost` - an attached mask owns value-sync; our input/mirror handling stands down. */
|
|
24228
|
+
suppressNativeSync() {
|
|
24229
|
+
this.maskAttached.set(true);
|
|
24230
|
+
}
|
|
24231
|
+
/** @internal `InputMaskHost` - the mask was set to `null`; native handling resumes. */
|
|
24232
|
+
resumeNativeSync() {
|
|
24233
|
+
this.maskAttached.set(false);
|
|
24234
|
+
}
|
|
24235
|
+
placeholder() {
|
|
24236
|
+
const rangeInput = this.rangeInput;
|
|
24237
|
+
if (!rangeInput) {
|
|
24238
|
+
return '';
|
|
24239
|
+
}
|
|
24240
|
+
// while mixed both fields render empty and the mixed label shows through the placeholder
|
|
24241
|
+
if (rangeInput.mixed()) {
|
|
24242
|
+
return rangeInput.resolvedMixedLabel();
|
|
24243
|
+
}
|
|
24244
|
+
return this.side() === 'start' ? rangeInput.startPlaceholder() : rangeInput.endPlaceholder();
|
|
24245
|
+
}
|
|
24246
|
+
handleInput() {
|
|
24247
|
+
// the mask reconciles the edit and writes `value` (and thereby `inputText`) itself
|
|
24248
|
+
if (this.maskAttached()) {
|
|
24249
|
+
return;
|
|
24250
|
+
}
|
|
24251
|
+
this.rangeInput?.setInputText(this.side(), this.elementRef.nativeElement.value);
|
|
24252
|
+
}
|
|
24253
|
+
handleFocus() {
|
|
24254
|
+
this.rangeInput?.focusedSide.set(this.side());
|
|
24255
|
+
}
|
|
24256
|
+
handleBlur() {
|
|
24257
|
+
const rangeInput = this.rangeInput;
|
|
24258
|
+
if (!rangeInput) {
|
|
24259
|
+
return;
|
|
24260
|
+
}
|
|
24261
|
+
rangeInput.commitSide(this.side(), this.commitText());
|
|
24262
|
+
if (rangeInput.focusedSide() === this.side()) {
|
|
24263
|
+
rangeInput.focusedSide.set(null);
|
|
24264
|
+
}
|
|
24265
|
+
rangeInput.touched.set(true);
|
|
24266
|
+
}
|
|
24267
|
+
handleKeydown(event) {
|
|
24268
|
+
const rangeInput = this.rangeInput;
|
|
24269
|
+
if (!rangeInput) {
|
|
24270
|
+
return;
|
|
24271
|
+
}
|
|
24272
|
+
if (event.key === 'Enter') {
|
|
24273
|
+
rangeInput.commitSide(this.side(), this.commitText());
|
|
24274
|
+
// a successful commit reformats in place (the display effect only runs
|
|
24275
|
+
// unfocused); a mask re-renders the element from the reset `value` instead
|
|
24276
|
+
if (!rangeInput.sideParseError(this.side()) && !this.maskAttached()) {
|
|
24277
|
+
this.elementRef.nativeElement.value = rangeInput.displayValue(this.side());
|
|
24278
|
+
}
|
|
24279
|
+
return;
|
|
24280
|
+
}
|
|
24281
|
+
if (event.key === 'ArrowDown' && event.altKey) {
|
|
24282
|
+
event.preventDefault();
|
|
24283
|
+
rangeInput.openPicker();
|
|
24284
|
+
}
|
|
24285
|
+
}
|
|
24286
|
+
/** The committed display text, or the unparseable text this side is holding on to. */
|
|
24287
|
+
mirrorText(rangeInput) {
|
|
24288
|
+
const side = this.side();
|
|
24289
|
+
return rangeInput.sideParseError(side) ? rangeInput.inputText(side) : rangeInput.displayValue(side);
|
|
24290
|
+
}
|
|
24291
|
+
/** What a blur/Enter commit parses - the mask's value, since the element text may hold guide placeholders. */
|
|
24292
|
+
commitText() {
|
|
24293
|
+
return this.maskAttached() ? this.value() : this.elementRef.nativeElement.value;
|
|
24294
|
+
}
|
|
24295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerInputFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
24296
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DateRangePickerInputFieldDirective, isStandalone: true, inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "text", "autocomplete": "off" }, listeners: { "input": "handleInput()", "focus": "handleFocus()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "attr.inputmode": "maskAttached() ? \"numeric\" : null", "attr.placeholder": "placeholder() || null", "attr.aria-required": "rangeInput?.required() || null", "attr.aria-invalid": "rangeInput?.shouldDisplayError() || null", "attr.aria-describedby": "rangeInput?.describedBy() || null", "attr.disabled": "rangeInput?.disabled() ? \"\" : null", "attr.readonly": "rangeInput?.readonly() ? \"\" : null" } }, ngImport: i0 }); }
|
|
24297
|
+
}
|
|
24298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerInputFieldDirective, decorators: [{
|
|
24299
|
+
type: Directive,
|
|
24300
|
+
args: [{
|
|
24301
|
+
host: {
|
|
24302
|
+
type: 'text',
|
|
24303
|
+
autocomplete: 'off',
|
|
24304
|
+
'[attr.inputmode]': 'maskAttached() ? "numeric" : null',
|
|
24305
|
+
'[attr.placeholder]': 'placeholder() || null',
|
|
24306
|
+
'[attr.aria-required]': 'rangeInput?.required() || null',
|
|
24307
|
+
'[attr.aria-invalid]': 'rangeInput?.shouldDisplayError() || null',
|
|
24308
|
+
'[attr.aria-describedby]': 'rangeInput?.describedBy() || null',
|
|
24309
|
+
// attr bindings, not [disabled]/[readOnly]: this base has no selector, so the template
|
|
24310
|
+
// checker can't tie the host to an <input> and rejects the property forms (NG8002)
|
|
24311
|
+
'[attr.disabled]': 'rangeInput?.disabled() ? "" : null',
|
|
24312
|
+
'[attr.readonly]': 'rangeInput?.readonly() ? "" : null',
|
|
24313
|
+
'(input)': 'handleInput()',
|
|
24314
|
+
'(focus)': 'handleFocus()',
|
|
24315
|
+
'(blur)': 'handleBlur()',
|
|
24316
|
+
'(keydown)': 'handleKeydown($event)',
|
|
24317
|
+
},
|
|
24318
|
+
}]
|
|
24319
|
+
}], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: true }] }] } });
|
|
24320
|
+
|
|
24321
|
+
const DATE_RANGE_SIDES = ['start', 'end'];
|
|
24322
|
+
/**
|
|
24323
|
+
* Shared host for the two-sided range picker inputs (`et-date-range-input`, `et-time-range-input`,
|
|
24324
|
+
* `et-date-time-range-input`): one registered field-control containing two text inputs that share a
|
|
24325
|
+
* single range-mode picker. Owns the per-side text/parse state, the field registration, the standard
|
|
24326
|
+
* control inputs, the picker overlay, the typing mask and the form-field registration. Subclasses add
|
|
24327
|
+
* their own `displayFormat`, `controlType`, `defaultValueFormat`, parse normalization
|
|
24328
|
+
* (`parseSideCommit`), picker-selection semantics and (date + date-time) the calendar bounds.
|
|
24329
|
+
*
|
|
24330
|
+
* Must be extended by an `@Directive` - Angular only surfaces inherited inputs from a decorated base.
|
|
24331
|
+
*/
|
|
24332
|
+
class DateRangePickerInputDirective {
|
|
24010
24333
|
constructor() {
|
|
24011
|
-
this.dateTimeLabels = injectDateTimeLabels();
|
|
24012
24334
|
this.formFieldLabels = injectFormFieldLabels();
|
|
24013
24335
|
this.formField = inject(FORM_FIELD_TOKEN, { optional: true });
|
|
24014
24336
|
/** Only present under a signal-forms `[field]` binding - unset in manual `[value]`/`[errors]` use. */
|
|
24015
24337
|
this.ngFormField = inject(FORM_FIELD, { optional: true });
|
|
24016
24338
|
this.destroyRef = inject(DestroyRef);
|
|
24017
24339
|
this.document = inject(DOCUMENT$1);
|
|
24018
|
-
this.defaultValueFormat = injectDateFormat();
|
|
24019
24340
|
this.defaultLocale = injectDateLocale();
|
|
24020
24341
|
/** Wire values in `valueFormat`; a side is `null` while empty/unparseable. */
|
|
24021
24342
|
this.value = model({ start: null, end: null }, /* @ts-ignore */
|
|
@@ -24047,84 +24368,29 @@ class DateRangeInputDirective {
|
|
|
24047
24368
|
*/
|
|
24048
24369
|
this.mixedLabel = input(null, /* @ts-ignore */
|
|
24049
24370
|
...(ngDevMode ? [{ debugName: "mixedLabel" }] : /* istanbul ignore next */ []));
|
|
24050
|
-
/** Message the form field shows when either side's typed text can't be parsed as a date. */
|
|
24051
|
-
this.parseErrorMessage = input(null, /* @ts-ignore */
|
|
24052
|
-
...(ngDevMode ? [{ debugName: "parseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
24053
24371
|
/** date-fns format of the string values. Defaults to the `DATE_FORMAT` token. */
|
|
24054
24372
|
this.valueFormat = input(undefined, /* @ts-ignore */
|
|
24055
24373
|
...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
|
|
24056
|
-
/**
|
|
24057
|
-
* date-fns format shown in (and parsed from) the fields. Unset, it follows `precision`: the
|
|
24058
|
-
* locale's short date at day precision, that same pattern without its day at month precision
|
|
24059
|
-
* (`MM.yyyy`), the year alone at year precision.
|
|
24060
|
-
*/
|
|
24061
|
-
this.displayFormat = input(null, /* @ts-ignore */
|
|
24062
|
-
...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
|
|
24063
|
-
/**
|
|
24064
|
-
* How precise the two dates are - `'month'` makes this a month range (`07/2025 – 03/2026`), a
|
|
24065
|
-
* real reporting filter. Both ends are the start of their unit, and the picker calendar selects
|
|
24066
|
-
* and bands in the grid holding it.
|
|
24067
|
-
*/
|
|
24068
|
-
this.precision = input('day', /* @ts-ignore */
|
|
24069
|
-
...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
|
|
24070
24374
|
this.locale = input(null, /* @ts-ignore */
|
|
24071
24375
|
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
24072
24376
|
/**
|
|
24073
24377
|
* Opt-in typing mask: when `displayFormat` is fixed-width numeric (`dd.MM.yyyy`),
|
|
24074
24378
|
* both fields get guide placeholders (`__.__.____`), auto-inserted separators,
|
|
24075
24379
|
* and paste filtering. Formats the mask cannot represent - locale formats like
|
|
24076
|
-
*
|
|
24077
|
-
* unmasked. Commit parsing is identical either way: the
|
|
24078
|
-
*
|
|
24380
|
+
* `P`/`Pp`, variable-width or text tokens - are refused and typing stays
|
|
24381
|
+
* unmasked. Commit parsing is identical either way: the blur/Enter parsers stay
|
|
24382
|
+
* authoritative.
|
|
24079
24383
|
*/
|
|
24080
24384
|
this.mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24081
|
-
/** Forwarded to the picker calendar. (`min`/`max` are reserved by signal forms.) */
|
|
24082
|
-
this.minDate = input(null, /* @ts-ignore */
|
|
24083
|
-
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
24084
|
-
this.maxDate = input(null, /* @ts-ignore */
|
|
24085
|
-
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
24086
|
-
this.dateFilter = input(null, /* @ts-ignore */
|
|
24087
|
-
...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
|
|
24088
|
-
/** Month the picker calendar opens at while the range is empty. */
|
|
24089
|
-
this.startAt = input(null, /* @ts-ignore */
|
|
24090
|
-
...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
24091
|
-
/** Which grid the picker calendar opens on - `'year'` to pick a month first, `'multiYear'` a year. */
|
|
24092
|
-
this.startView = input('month', /* @ts-ignore */
|
|
24093
|
-
...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
|
|
24094
|
-
/** Per-cell classes for the picker calendar - busy days, holidays, markers of your own. */
|
|
24095
|
-
this.dateClass = input(null, /* @ts-ignore */
|
|
24096
|
-
...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
|
|
24097
|
-
/** Renders the picker calendar's week-number column. */
|
|
24098
|
-
this.weekNumbers = input(false, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24099
|
-
/**
|
|
24100
|
-
* What a pick means in the picker calendar - snap to whole weeks, take a fixed number of days.
|
|
24101
|
-
* Unset, the usual open-then-close rule applies.
|
|
24102
|
-
*/
|
|
24103
|
-
this.rangeSelectionStrategy = input(null, /* @ts-ignore */
|
|
24104
|
-
...(ngDevMode ? [{ debugName: "rangeSelectionStrategy" }] : /* istanbul ignore next */ []));
|
|
24105
|
-
/**
|
|
24106
|
-
* A period to band behind the selected range in the picker - "vs. the previous 30 days". Purely
|
|
24107
|
-
* presentational: it never enters the value and its cells stay selectable.
|
|
24108
|
-
*/
|
|
24109
|
-
this.comparisonStart = input(null, /* @ts-ignore */
|
|
24110
|
-
...(ngDevMode ? [{ debugName: "comparisonStart" }] : /* istanbul ignore next */ []));
|
|
24111
|
-
this.comparisonEnd = input(null, /* @ts-ignore */
|
|
24112
|
-
...(ngDevMode ? [{ debugName: "comparisonEnd" }] : /* istanbul ignore next */ []));
|
|
24113
24385
|
this.pickerOpen = model(false, /* @ts-ignore */
|
|
24114
24386
|
...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
|
|
24115
24387
|
/** The string in effect: this instance's `mixedLabel`, else `FORM_FIELD_LABELS`. */
|
|
24116
24388
|
this.resolvedMixedLabel = computed(() => this.mixedLabel() ?? this.formFieldLabels().mixed, /* @ts-ignore */
|
|
24117
24389
|
...(ngDevMode ? [{ debugName: "resolvedMixedLabel" }] : /* istanbul ignore next */ []));
|
|
24118
|
-
/** The string in effect: this instance's `parseErrorMessage`, else the domain's label set. */
|
|
24119
|
-
this.resolvedParseErrorMessage = computed(() => this.parseErrorMessage() ?? this.dateTimeLabels().invalidDateRange, /* @ts-ignore */
|
|
24120
|
-
...(ngDevMode ? [{ debugName: "resolvedParseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
24121
24390
|
this.effectiveValueFormat = computed(() => this.valueFormat() ?? this.defaultValueFormat, /* @ts-ignore */
|
|
24122
24391
|
...(ngDevMode ? [{ debugName: "effectiveValueFormat" }] : /* istanbul ignore next */ []));
|
|
24123
24392
|
this.effectiveLocale = computed(() => this.locale() ?? this.defaultLocale, /* @ts-ignore */
|
|
24124
24393
|
...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
|
|
24125
|
-
/** The format in effect: this instance's `displayFormat`, else the one `precision` implies. */
|
|
24126
|
-
this.effectiveDisplayFormat = computed(() => this.displayFormat() ?? displayFormatForPrecision(this.precision(), this.effectiveLocale()), /* @ts-ignore */
|
|
24127
|
-
...(ngDevMode ? [{ debugName: "effectiveDisplayFormat" }] : /* istanbul ignore next */ []));
|
|
24128
24394
|
/** The side the focused field edits - the picker previews from here too. */
|
|
24129
24395
|
this.focusedSide = signal(null, /* @ts-ignore */
|
|
24130
24396
|
...(ngDevMode ? [{ debugName: "focusedSide" }] : /* istanbul ignore next */ []));
|
|
@@ -24138,7 +24404,7 @@ class DateRangeInputDirective {
|
|
|
24138
24404
|
...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
|
|
24139
24405
|
this.endDate = computed(() => (this.mixed() ? null : this.parseSide(this.value().end)), /* @ts-ignore */
|
|
24140
24406
|
...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
|
|
24141
|
-
/**
|
|
24407
|
+
/** The two committed ends as `Date` objects - what the picker's calendar and time picker bind to. */
|
|
24142
24408
|
this.calendarRange = computed(() => ({ start: this.startDate(), end: this.endDate() }), /* @ts-ignore */
|
|
24143
24409
|
...(ngDevMode ? [{ debugName: "calendarRange" }] : /* istanbul ignore next */ []));
|
|
24144
24410
|
this.startParseError = this.sides.start.parseError.asReadonly();
|
|
@@ -24147,8 +24413,6 @@ class DateRangeInputDirective {
|
|
|
24147
24413
|
...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
|
|
24148
24414
|
this.describedBy = signal(null, /* @ts-ignore */
|
|
24149
24415
|
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
24150
|
-
this.controlType = signal(FORM_FIELD_CONTROL_TYPES.DATE_RANGE_INPUT, /* @ts-ignore */
|
|
24151
|
-
...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
24152
24416
|
this.focused = computed(() => this.focusedSide() !== null || this.pickerOpen(), /* @ts-ignore */
|
|
24153
24417
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
24154
24418
|
/** @internal Keeps the form field in its focused style while the picker overlay is open. */
|
|
@@ -24194,12 +24458,14 @@ class DateRangeInputDirective {
|
|
|
24194
24458
|
disabled: this.disabled,
|
|
24195
24459
|
readonly: this.readonly,
|
|
24196
24460
|
describedBy: this.describedBy,
|
|
24197
|
-
|
|
24461
|
+
// both are subclass fields, which initialize after this one - reading them through a computed
|
|
24462
|
+
// defers it past construction. Assigning them directly would register `undefined`.
|
|
24463
|
+
controlType: computed(() => this.controlType()),
|
|
24464
|
+
resolvedParseErrorMessage: computed(() => this.resolvedParseErrorMessage()),
|
|
24198
24465
|
focused: this.focused,
|
|
24199
24466
|
expanded: this.expanded,
|
|
24200
24467
|
hasValue: this.hasValue,
|
|
24201
24468
|
parseError: this.parseError,
|
|
24202
|
-
resolvedParseErrorMessage: this.resolvedParseErrorMessage,
|
|
24203
24469
|
activate: () => this.activate(),
|
|
24204
24470
|
};
|
|
24205
24471
|
this.overlay = createDatePickerOverlay({
|
|
@@ -24238,12 +24504,16 @@ class DateRangeInputDirective {
|
|
|
24238
24504
|
}
|
|
24239
24505
|
/** The committed value of one side rendered in the format in effect. */
|
|
24240
24506
|
displayValue(side) {
|
|
24241
|
-
const date =
|
|
24507
|
+
const date = this.sideDate(side);
|
|
24242
24508
|
if (date === null) {
|
|
24243
24509
|
return '';
|
|
24244
24510
|
}
|
|
24245
24511
|
return formatDateValue(date, { format: this.effectiveDisplayFormat(), locale: this.effectiveLocale() }) ?? '';
|
|
24246
24512
|
}
|
|
24513
|
+
/** The committed `Date` of one side, or `null` while that side is empty (or the value is masked). */
|
|
24514
|
+
sideDate(side) {
|
|
24515
|
+
return side === 'start' ? this.startDate() : this.endDate();
|
|
24516
|
+
}
|
|
24247
24517
|
activate() {
|
|
24248
24518
|
if (this.disabled()) {
|
|
24249
24519
|
return;
|
|
@@ -24277,7 +24547,7 @@ class DateRangeInputDirective {
|
|
|
24277
24547
|
setInputText(side, text) {
|
|
24278
24548
|
this.sides[side].inputText.set(text);
|
|
24279
24549
|
}
|
|
24280
|
-
/** @internal
|
|
24550
|
+
/** @internal Commits one side's typed text, with the subclass's parse rules. */
|
|
24281
24551
|
commitSide(side, raw) {
|
|
24282
24552
|
const state = this.sides[side];
|
|
24283
24553
|
if (!raw.trim()) {
|
|
@@ -24290,13 +24560,7 @@ class DateRangeInputDirective {
|
|
|
24290
24560
|
}
|
|
24291
24561
|
return;
|
|
24292
24562
|
}
|
|
24293
|
-
|
|
24294
|
-
// time into a time-bearing `valueFormat` - see the note in date-input's `commitInput`.
|
|
24295
|
-
const parsed = parseDateValue(raw, {
|
|
24296
|
-
format: this.effectiveDisplayFormat(),
|
|
24297
|
-
locale: this.effectiveLocale(),
|
|
24298
|
-
referenceDate: startOfDay(new Date()),
|
|
24299
|
-
});
|
|
24563
|
+
const parsed = this.parseSideCommit(raw);
|
|
24300
24564
|
if (parsed === null) {
|
|
24301
24565
|
state.inputText.set(raw);
|
|
24302
24566
|
state.parseError.set(true);
|
|
@@ -24308,40 +24572,7 @@ class DateRangeInputDirective {
|
|
|
24308
24572
|
}
|
|
24309
24573
|
state.inputText.set('');
|
|
24310
24574
|
state.parseError.set(false);
|
|
24311
|
-
|
|
24312
|
-
const formatted = formatDateValue(startOfCalendarUnit(parsed, this.precision()), {
|
|
24313
|
-
format: this.effectiveValueFormat(),
|
|
24314
|
-
locale: this.effectiveLocale(),
|
|
24315
|
-
});
|
|
24316
|
-
// replace semantics: the first resolving commit starts a fresh range - the hidden
|
|
24317
|
-
// other side must not leak into the new value
|
|
24318
|
-
if (this.mixed()) {
|
|
24319
|
-
this.value.set({ start: null, end: null, [side]: formatted });
|
|
24320
|
-
this.mixed.set(false);
|
|
24321
|
-
return;
|
|
24322
|
-
}
|
|
24323
|
-
this.writeSide(side, formatted);
|
|
24324
|
-
}
|
|
24325
|
-
/** Commits a picker range; a completed range closes the picker. */
|
|
24326
|
-
selectCalendarRange(range) {
|
|
24327
|
-
if (!this.interactive()) {
|
|
24328
|
-
return;
|
|
24329
|
-
}
|
|
24330
|
-
const options = { format: this.effectiveValueFormat(), locale: this.effectiveLocale() };
|
|
24331
|
-
const precision = this.precision();
|
|
24332
|
-
const write = (date) => date === null ? null : formatDateValue(startOfCalendarUnit(date, precision), options);
|
|
24333
|
-
for (const side of ['start', 'end']) {
|
|
24334
|
-
this.sides[side].inputText.set('');
|
|
24335
|
-
this.sides[side].parseError.set(false);
|
|
24336
|
-
}
|
|
24337
|
-
this.value.set({ start: write(range.start), end: write(range.end) });
|
|
24338
|
-
// the calendar showed no selection while mixed, so this is the normal range-building
|
|
24339
|
-
// flow starting fresh - the first pick already replaces the whole hidden range
|
|
24340
|
-
this.mixed.set(false);
|
|
24341
|
-
if (range.start !== null && range.end !== null) {
|
|
24342
|
-
this.touched.set(true);
|
|
24343
|
-
this.closePicker();
|
|
24344
|
-
}
|
|
24575
|
+
this.commitSideValue(side, this.formatSide(parsed));
|
|
24345
24576
|
}
|
|
24346
24577
|
/** Clears both sides and any uncommitted field text - wired to the styled input's clear button. */
|
|
24347
24578
|
clearRange() {
|
|
@@ -24350,9 +24581,8 @@ class DateRangeInputDirective {
|
|
|
24350
24581
|
}
|
|
24351
24582
|
this.value.set({ start: null, end: null });
|
|
24352
24583
|
this.mixed.set(false);
|
|
24353
|
-
for (const side of
|
|
24354
|
-
this.
|
|
24355
|
-
this.sides[side].parseError.set(false);
|
|
24584
|
+
for (const side of DATE_RANGE_SIDES) {
|
|
24585
|
+
this.clearSideText(side);
|
|
24356
24586
|
// the field only mirrors state while unfocused; a clear happens while focused, so blank the element directly
|
|
24357
24587
|
const el = this.sides[side].field()?.elementRef.nativeElement;
|
|
24358
24588
|
if (el) {
|
|
@@ -24370,6 +24600,52 @@ class DateRangeInputDirective {
|
|
|
24370
24600
|
this.sides[side].field.set(null);
|
|
24371
24601
|
}
|
|
24372
24602
|
}
|
|
24603
|
+
/** @internal One side's committed value rendered in `valueFormat`. */
|
|
24604
|
+
formatSide(date) {
|
|
24605
|
+
return formatDateValue(date, { format: this.effectiveValueFormat(), locale: this.effectiveLocale() });
|
|
24606
|
+
}
|
|
24607
|
+
/**
|
|
24608
|
+
* @internal Commits one side's `Date` - a picker selection that resolves a single end, dropping
|
|
24609
|
+
* that side's pending field text.
|
|
24610
|
+
*/
|
|
24611
|
+
commitSideDate(side, date) {
|
|
24612
|
+
this.clearSideText(side);
|
|
24613
|
+
this.commitSideValue(side, this.formatSide(date));
|
|
24614
|
+
}
|
|
24615
|
+
/**
|
|
24616
|
+
* @internal Writes one resolving side value. While mixed, replace semantics apply: the hidden raw
|
|
24617
|
+
* range is dropped rather than merged into, so the other side cannot leak into the new value.
|
|
24618
|
+
*/
|
|
24619
|
+
commitSideValue(side, sideValue) {
|
|
24620
|
+
if (this.mixed()) {
|
|
24621
|
+
this.value.set({ start: null, end: null, [side]: sideValue });
|
|
24622
|
+
this.mixed.set(false);
|
|
24623
|
+
return;
|
|
24624
|
+
}
|
|
24625
|
+
this.writeSide(side, sideValue);
|
|
24626
|
+
}
|
|
24627
|
+
/**
|
|
24628
|
+
* @internal Writes a picker-selected range: both sides at once, any pending field text dropped,
|
|
24629
|
+
* and the masked bulk-edit state resolved. What the picker does about focus and about staying open
|
|
24630
|
+
* is the subclass's call.
|
|
24631
|
+
*/
|
|
24632
|
+
writeRange(range) {
|
|
24633
|
+
for (const side of DATE_RANGE_SIDES) {
|
|
24634
|
+
this.clearSideText(side);
|
|
24635
|
+
}
|
|
24636
|
+
this.value.set({
|
|
24637
|
+
start: range.start === null ? null : this.formatSide(range.start),
|
|
24638
|
+
end: range.end === null ? null : this.formatSide(range.end),
|
|
24639
|
+
});
|
|
24640
|
+
// the calendar showed no selection while mixed, so this is the normal range-building
|
|
24641
|
+
// flow starting fresh - the first pick already replaces the whole hidden range
|
|
24642
|
+
this.mixed.set(false);
|
|
24643
|
+
}
|
|
24644
|
+
/** @internal Drops one side's uncommitted text and its parse error. */
|
|
24645
|
+
clearSideText(side) {
|
|
24646
|
+
this.sides[side].inputText.set('');
|
|
24647
|
+
this.sides[side].parseError.set(false);
|
|
24648
|
+
}
|
|
24373
24649
|
parseSide(value) {
|
|
24374
24650
|
if (value === null) {
|
|
24375
24651
|
return null;
|
|
@@ -24388,8 +24664,116 @@ class DateRangeInputDirective {
|
|
|
24388
24664
|
this.sides.start.field()?.elementRef.nativeElement ??
|
|
24389
24665
|
this.registeredTrigger()?.elementRef.nativeElement);
|
|
24390
24666
|
}
|
|
24391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type:
|
|
24392
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type:
|
|
24667
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
24668
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DateRangePickerInputDirective, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, pickerOpen: { classPropertyName: "pickerOpen", publicName: "pickerOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange", pickerOpen: "pickerOpenChange" }, host: { properties: { "attr.data-mixed": "mixed() || null" } }, ngImport: i0 }); }
|
|
24669
|
+
}
|
|
24670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangePickerInputDirective, decorators: [{
|
|
24671
|
+
type: Directive,
|
|
24672
|
+
args: [{
|
|
24673
|
+
host: {
|
|
24674
|
+
'[attr.data-mixed]': 'mixed() || null',
|
|
24675
|
+
},
|
|
24676
|
+
}]
|
|
24677
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], pickerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerOpen", required: false }] }, { type: i0.Output, args: ["pickerOpenChange"] }] } });
|
|
24678
|
+
|
|
24679
|
+
/**
|
|
24680
|
+
* A date range form control: one registered field-control containing two text
|
|
24681
|
+
* inputs that share a single range-mode calendar picker. The value is
|
|
24682
|
+
* `{ start, end }` of `valueFormat` wire strings; each side parses strictly
|
|
24683
|
+
* against `displayFormat` on blur/Enter, exactly like the single date input.
|
|
24684
|
+
*/
|
|
24685
|
+
class DateRangeInputDirective extends DateRangePickerInputDirective {
|
|
24686
|
+
constructor() {
|
|
24687
|
+
super(...arguments);
|
|
24688
|
+
this.dateTimeLabels = injectDateTimeLabels();
|
|
24689
|
+
this.defaultValueFormat = injectDateFormat();
|
|
24690
|
+
/** Message the form field shows when either side's typed text can't be parsed as a date. */
|
|
24691
|
+
this.parseErrorMessage = input(null, /* @ts-ignore */
|
|
24692
|
+
...(ngDevMode ? [{ debugName: "parseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
24693
|
+
/**
|
|
24694
|
+
* date-fns format shown in (and parsed from) the fields. Unset, it follows `precision`: the
|
|
24695
|
+
* locale's short date at day precision, that same pattern without its day at month precision
|
|
24696
|
+
* (`MM.yyyy`), the year alone at year precision.
|
|
24697
|
+
*/
|
|
24698
|
+
this.displayFormat = input(null, /* @ts-ignore */
|
|
24699
|
+
...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
|
|
24700
|
+
/**
|
|
24701
|
+
* How precise the two dates are - `'month'` makes this a month range (`07/2025 – 03/2026`), a
|
|
24702
|
+
* real reporting filter. Both ends are the start of their unit, and the picker calendar selects
|
|
24703
|
+
* and bands in the grid holding it.
|
|
24704
|
+
*/
|
|
24705
|
+
this.precision = input('day', /* @ts-ignore */
|
|
24706
|
+
...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
|
|
24707
|
+
/**
|
|
24708
|
+
* What a pick means in the picker calendar - snap to whole weeks, take a fixed number of days.
|
|
24709
|
+
* Unset, the usual open-then-close rule applies.
|
|
24710
|
+
*/
|
|
24711
|
+
this.rangeSelectionStrategy = input(null, /* @ts-ignore */
|
|
24712
|
+
...(ngDevMode ? [{ debugName: "rangeSelectionStrategy" }] : /* istanbul ignore next */ []));
|
|
24713
|
+
/**
|
|
24714
|
+
* A period to band behind the selected range in the picker - "vs. the previous 30 days". Purely
|
|
24715
|
+
* presentational: it never enters the value and its cells stay selectable.
|
|
24716
|
+
*/
|
|
24717
|
+
this.comparisonStart = input(null, /* @ts-ignore */
|
|
24718
|
+
...(ngDevMode ? [{ debugName: "comparisonStart" }] : /* istanbul ignore next */ []));
|
|
24719
|
+
this.comparisonEnd = input(null, /* @ts-ignore */
|
|
24720
|
+
...(ngDevMode ? [{ debugName: "comparisonEnd" }] : /* istanbul ignore next */ []));
|
|
24721
|
+
/** Forwarded to the picker calendar. (`min`/`max` are reserved by signal forms.) */
|
|
24722
|
+
this.minDate = input(null, /* @ts-ignore */
|
|
24723
|
+
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
24724
|
+
this.maxDate = input(null, /* @ts-ignore */
|
|
24725
|
+
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
24726
|
+
this.dateFilter = input(null, /* @ts-ignore */
|
|
24727
|
+
...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
|
|
24728
|
+
/** Month the picker calendar opens at while the range is empty. */
|
|
24729
|
+
this.startAt = input(null, /* @ts-ignore */
|
|
24730
|
+
...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
24731
|
+
/** Which grid the picker calendar opens on - `'year'` to pick a month first, `'multiYear'` a year. */
|
|
24732
|
+
this.startView = input('month', /* @ts-ignore */
|
|
24733
|
+
...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
|
|
24734
|
+
/** Per-cell classes for the picker calendar - busy days, holidays, markers of your own. */
|
|
24735
|
+
this.dateClass = input(null, /* @ts-ignore */
|
|
24736
|
+
...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
|
|
24737
|
+
/** Renders the picker calendar's week-number column. */
|
|
24738
|
+
this.weekNumbers = input(false, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24739
|
+
/** The string in effect: this instance's `parseErrorMessage`, else the domain's label set. */
|
|
24740
|
+
this.resolvedParseErrorMessage = computed(() => this.parseErrorMessage() ?? this.dateTimeLabels().invalidDateRange, /* @ts-ignore */
|
|
24741
|
+
...(ngDevMode ? [{ debugName: "resolvedParseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
24742
|
+
/** The format in effect: this instance's `displayFormat`, else the one `precision` implies. */
|
|
24743
|
+
this.effectiveDisplayFormat = computed(() => this.displayFormat() ?? displayFormatForPrecision(this.precision(), this.effectiveLocale()), /* @ts-ignore */
|
|
24744
|
+
...(ngDevMode ? [{ debugName: "effectiveDisplayFormat" }] : /* istanbul ignore next */ []));
|
|
24745
|
+
this.controlType = signal(FORM_FIELD_CONTROL_TYPES.DATE_RANGE_INPUT, /* @ts-ignore */
|
|
24746
|
+
...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
24747
|
+
}
|
|
24748
|
+
/** Commits a picker range; a completed range closes the picker. */
|
|
24749
|
+
selectCalendarRange(range) {
|
|
24750
|
+
if (!this.interactive()) {
|
|
24751
|
+
return;
|
|
24752
|
+
}
|
|
24753
|
+
const precision = this.precision();
|
|
24754
|
+
const unitStart = (date) => (date === null ? null : startOfCalendarUnit(date, precision));
|
|
24755
|
+
this.writeRange({ start: unitStart(range.start), end: unitStart(range.end) });
|
|
24756
|
+
if (range.start !== null && range.end !== null) {
|
|
24757
|
+
this.touched.set(true);
|
|
24758
|
+
this.closePicker();
|
|
24759
|
+
}
|
|
24760
|
+
}
|
|
24761
|
+
parseSideCommit(raw) {
|
|
24762
|
+
// reference midnight so a date-only `displayFormat` doesn't fold the current wall-clock
|
|
24763
|
+
// time into a time-bearing `valueFormat` - see the note in date-input's `commitInput`.
|
|
24764
|
+
const parsed = parseDateValue(raw, {
|
|
24765
|
+
format: this.effectiveDisplayFormat(),
|
|
24766
|
+
locale: this.effectiveLocale(),
|
|
24767
|
+
referenceDate: startOfDay(new Date()),
|
|
24768
|
+
});
|
|
24769
|
+
if (parsed === null) {
|
|
24770
|
+
return null;
|
|
24771
|
+
}
|
|
24772
|
+
// the unit start, so a typed month and a picked month are one value - see date-input's `writeDate`
|
|
24773
|
+
return startOfCalendarUnit(parsed, this.precision());
|
|
24774
|
+
}
|
|
24775
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
24776
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DateRangeInputDirective, isStandalone: true, selector: "[etDateRangeInput]", inputs: { parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, rangeSelectionStrategy: { classPropertyName: "rangeSelectionStrategy", publicName: "rangeSelectionStrategy", isSignal: true, isRequired: false, transformFunction: null }, comparisonStart: { classPropertyName: "comparisonStart", publicName: "comparisonStart", isSignal: true, isRequired: false, transformFunction: null }, comparisonEnd: { classPropertyName: "comparisonEnd", publicName: "comparisonEnd", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DATE_PICKER_HOST, useExisting: DateRangeInputDirective }], exportAs: ["etDateRangeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
24393
24777
|
}
|
|
24394
24778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputDirective, decorators: [{
|
|
24395
24779
|
type: Directive,
|
|
@@ -24397,11 +24781,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
24397
24781
|
selector: '[etDateRangeInput]',
|
|
24398
24782
|
exportAs: 'etDateRangeInput',
|
|
24399
24783
|
providers: [{ provide: DATE_PICKER_HOST, useExisting: DateRangeInputDirective }],
|
|
24400
|
-
host: {
|
|
24401
|
-
'[attr.data-mixed]': 'mixed() || null',
|
|
24402
|
-
},
|
|
24403
24784
|
}]
|
|
24404
|
-
}],
|
|
24785
|
+
}], propDecorators: { parseErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseErrorMessage", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], rangeSelectionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSelectionStrategy", required: false }] }], comparisonStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonStart", required: false }] }], comparisonEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonEnd", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }] } });
|
|
24405
24786
|
|
|
24406
24787
|
/**
|
|
24407
24788
|
* One side of a date range input: shows the committed side value in the
|
|
@@ -24410,82 +24791,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
24410
24791
|
* range input's opt-in typing mask (`INPUT_MASK_HOST`) - each side is its own
|
|
24411
24792
|
* mask host.
|
|
24412
24793
|
*/
|
|
24413
|
-
class DateRangeInputFieldDirective {
|
|
24794
|
+
class DateRangeInputFieldDirective extends DateRangePickerInputFieldDirective {
|
|
24414
24795
|
constructor() {
|
|
24796
|
+
super();
|
|
24797
|
+
// eslint-disable-next-line ethlete/inject-member-accessibility -- referenced from the base class's host bindings
|
|
24415
24798
|
this.rangeInput = inject(DateRangeInputDirective, { optional: true });
|
|
24416
|
-
this.elementRef = inject(ElementRef);
|
|
24417
|
-
this.destroyRef = inject(DestroyRef);
|
|
24418
|
-
/** Which end of the range this field edits. */
|
|
24419
|
-
this.side = input.required(/* @ts-ignore */
|
|
24420
|
-
...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
24421
|
-
/** Set while an `[etInputMask]` owns this field's element text and value-sync. */
|
|
24422
|
-
this.maskAttached = signal(false, /* @ts-ignore */
|
|
24423
|
-
...(ngDevMode ? [{ debugName: "maskAttached" }] : /* istanbul ignore next */ []));
|
|
24424
|
-
/**
|
|
24425
|
-
* This side's field text as an attached mask sees it (`InputMaskHost.value`):
|
|
24426
|
-
* display-shaped, never containing guide placeholders. Mask edits write it while
|
|
24427
|
-
* typing; every commit resets it to the committed display text (or the kept
|
|
24428
|
-
* unparseable text), which also carries the committed value into a focus.
|
|
24429
|
-
*/
|
|
24430
|
-
this.value = linkedSignal(() => {
|
|
24431
|
-
const rangeInput = this.rangeInput;
|
|
24432
|
-
if (!rangeInput) {
|
|
24433
|
-
return '';
|
|
24434
|
-
}
|
|
24435
|
-
const side = this.side();
|
|
24436
|
-
return rangeInput.sideParseError(side) ? rangeInput.inputText(side) : rangeInput.displayValue(side);
|
|
24437
|
-
}, /* @ts-ignore */
|
|
24438
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
24439
|
-
/** Whether this side's field has focus (`InputMaskHost.focused`) - drives the mask's guide display. */
|
|
24440
|
-
this.focused = computed(() => this.rangeInput?.focusedSide() === this.side(), /* @ts-ignore */
|
|
24441
|
-
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
24442
|
-
/** The native element an attached mask rewrites (`InputMaskHost.nativeControl`). */
|
|
24443
|
-
this.nativeControl = signal(null, /* @ts-ignore */
|
|
24444
|
-
...(ngDevMode ? [{ debugName: "nativeControl" }] : /* istanbul ignore next */ []));
|
|
24445
|
-
this.nativeControl.set(this.elementRef.nativeElement);
|
|
24446
|
-
// the side input is not available at construction time - register reactively
|
|
24447
|
-
effect((onCleanup) => {
|
|
24448
|
-
const rangeInput = this.rangeInput;
|
|
24449
|
-
if (!rangeInput) {
|
|
24450
|
-
return;
|
|
24451
|
-
}
|
|
24452
|
-
const side = this.side();
|
|
24453
|
-
rangeInput.registerField(side, this);
|
|
24454
|
-
onCleanup(() => rangeInput.unregisterField(side, this));
|
|
24455
|
-
});
|
|
24456
|
-
// while unfocused the element mirrors the committed side value (or the kept
|
|
24457
|
-
// unparseable text); mid-typing rewrites would fight the caret. An attached
|
|
24458
|
-
// mask owns the element text instead and renders the same mirror itself
|
|
24459
|
-
effect(() => {
|
|
24460
|
-
const rangeInput = this.rangeInput;
|
|
24461
|
-
if (!rangeInput || this.maskAttached()) {
|
|
24462
|
-
return;
|
|
24463
|
-
}
|
|
24464
|
-
const side = this.side();
|
|
24465
|
-
const text = rangeInput.sideParseError(side) ? rangeInput.inputText(side) : rangeInput.displayValue(side);
|
|
24466
|
-
if (rangeInput.focusedSide() !== side && this.elementRef.nativeElement.value !== text) {
|
|
24467
|
-
this.elementRef.nativeElement.value = text;
|
|
24468
|
-
}
|
|
24469
|
-
});
|
|
24470
|
-
// masked typing bypasses handleInput, so mirror the mask-written text into
|
|
24471
|
-
// the side's inputText - hasValue (and the clear affordance) must react like
|
|
24472
|
-
// native typing
|
|
24473
|
-
effect(() => {
|
|
24474
|
-
if (!this.maskAttached()) {
|
|
24475
|
-
return;
|
|
24476
|
-
}
|
|
24477
|
-
const text = this.value();
|
|
24478
|
-
const rangeInput = this.rangeInput;
|
|
24479
|
-
const side = this.side();
|
|
24480
|
-
if (rangeInput && untracked(() => rangeInput.focusedSide()) === side) {
|
|
24481
|
-
untracked(() => rangeInput.setInputText(side, text));
|
|
24482
|
-
}
|
|
24483
|
-
});
|
|
24484
|
-
this.destroyRef.onDestroy(() => {
|
|
24485
|
-
if (this.rangeInput?.focusedSide() === this.side()) {
|
|
24486
|
-
this.rangeInput.focusedSide.set(null);
|
|
24487
|
-
}
|
|
24488
|
-
});
|
|
24489
24799
|
if (ngDevMode) {
|
|
24490
24800
|
afterNextRender(() => {
|
|
24491
24801
|
if (!this.rangeInput) {
|
|
@@ -24494,74 +24804,8 @@ class DateRangeInputFieldDirective {
|
|
|
24494
24804
|
});
|
|
24495
24805
|
}
|
|
24496
24806
|
}
|
|
24497
|
-
placeholder() {
|
|
24498
|
-
if (!this.rangeInput) {
|
|
24499
|
-
return '';
|
|
24500
|
-
}
|
|
24501
|
-
// while mixed both fields render empty and the mixed label shows through the placeholder
|
|
24502
|
-
if (this.rangeInput.mixed()) {
|
|
24503
|
-
return this.rangeInput.resolvedMixedLabel();
|
|
24504
|
-
}
|
|
24505
|
-
return this.side() === 'start' ? this.rangeInput.startPlaceholder() : this.rangeInput.endPlaceholder();
|
|
24506
|
-
}
|
|
24507
|
-
/** @internal */
|
|
24508
|
-
focus() {
|
|
24509
|
-
this.elementRef.nativeElement.focus({ preventScroll: true });
|
|
24510
|
-
}
|
|
24511
|
-
/** @internal `InputMaskHost` - an attached mask owns value-sync; our input/mirror handling stands down. */
|
|
24512
|
-
suppressNativeSync() {
|
|
24513
|
-
this.maskAttached.set(true);
|
|
24514
|
-
}
|
|
24515
|
-
/** @internal `InputMaskHost` - the mask was set to `null`; native handling resumes. */
|
|
24516
|
-
resumeNativeSync() {
|
|
24517
|
-
this.maskAttached.set(false);
|
|
24518
|
-
}
|
|
24519
|
-
handleInput() {
|
|
24520
|
-
// the mask reconciles the edit and writes `value` (and thereby `inputText`) itself
|
|
24521
|
-
if (this.maskAttached()) {
|
|
24522
|
-
return;
|
|
24523
|
-
}
|
|
24524
|
-
this.rangeInput?.setInputText(this.side(), this.elementRef.nativeElement.value);
|
|
24525
|
-
}
|
|
24526
|
-
handleFocus() {
|
|
24527
|
-
this.rangeInput?.focusedSide.set(this.side());
|
|
24528
|
-
}
|
|
24529
|
-
handleBlur() {
|
|
24530
|
-
const rangeInput = this.rangeInput;
|
|
24531
|
-
if (!rangeInput) {
|
|
24532
|
-
return;
|
|
24533
|
-
}
|
|
24534
|
-
rangeInput.commitSide(this.side(), this.commitText());
|
|
24535
|
-
if (rangeInput.focusedSide() === this.side()) {
|
|
24536
|
-
rangeInput.focusedSide.set(null);
|
|
24537
|
-
}
|
|
24538
|
-
rangeInput.touched.set(true);
|
|
24539
|
-
}
|
|
24540
|
-
handleKeydown(event) {
|
|
24541
|
-
const rangeInput = this.rangeInput;
|
|
24542
|
-
if (!rangeInput) {
|
|
24543
|
-
return;
|
|
24544
|
-
}
|
|
24545
|
-
if (event.key === 'Enter') {
|
|
24546
|
-
rangeInput.commitSide(this.side(), this.commitText());
|
|
24547
|
-
// a successful commit reformats in place (the display effect only runs
|
|
24548
|
-
// unfocused); a mask re-renders the element from the reset `value` instead
|
|
24549
|
-
if (!rangeInput.sideParseError(this.side()) && !this.maskAttached()) {
|
|
24550
|
-
this.elementRef.nativeElement.value = rangeInput.displayValue(this.side());
|
|
24551
|
-
}
|
|
24552
|
-
return;
|
|
24553
|
-
}
|
|
24554
|
-
if (event.key === 'ArrowDown' && event.altKey) {
|
|
24555
|
-
event.preventDefault();
|
|
24556
|
-
rangeInput.openPicker();
|
|
24557
|
-
}
|
|
24558
|
-
}
|
|
24559
|
-
/** What a blur/Enter commit parses - the mask's value, since the element text may hold guide placeholders. */
|
|
24560
|
-
commitText() {
|
|
24561
|
-
return this.maskAttached() ? this.value() : this.elementRef.nativeElement.value;
|
|
24562
|
-
}
|
|
24563
24807
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
24564
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
24808
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DateRangeInputFieldDirective, isStandalone: true, selector: "input[etDateRangeInputField]", providers: [{ provide: INPUT_MASK_HOST, useExisting: DateRangeInputFieldDirective }], exportAs: ["etDateRangeInputField"], usesInheritance: true, ngImport: i0 }); }
|
|
24565
24809
|
}
|
|
24566
24810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputFieldDirective, decorators: [{
|
|
24567
24811
|
type: Directive,
|
|
@@ -24569,23 +24813,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
24569
24813
|
selector: 'input[etDateRangeInputField]',
|
|
24570
24814
|
exportAs: 'etDateRangeInputField',
|
|
24571
24815
|
providers: [{ provide: INPUT_MASK_HOST, useExisting: DateRangeInputFieldDirective }],
|
|
24572
|
-
host: {
|
|
24573
|
-
type: 'text',
|
|
24574
|
-
autocomplete: 'off',
|
|
24575
|
-
'[attr.inputmode]': 'maskAttached() ? "numeric" : null',
|
|
24576
|
-
'[attr.placeholder]': 'placeholder() || null',
|
|
24577
|
-
'[attr.aria-required]': 'rangeInput?.required() || null',
|
|
24578
|
-
'[attr.aria-invalid]': 'rangeInput?.shouldDisplayError() || null',
|
|
24579
|
-
'[attr.aria-describedby]': 'rangeInput?.describedBy() || null',
|
|
24580
|
-
'[disabled]': 'rangeInput?.disabled() || false',
|
|
24581
|
-
'[readOnly]': 'rangeInput?.readonly() || false',
|
|
24582
|
-
'(input)': 'handleInput()',
|
|
24583
|
-
'(focus)': 'handleFocus()',
|
|
24584
|
-
'(blur)': 'handleBlur()',
|
|
24585
|
-
'(keydown)': 'handleKeydown($event)',
|
|
24586
|
-
},
|
|
24587
24816
|
}]
|
|
24588
|
-
}], ctorParameters: () => []
|
|
24817
|
+
}], ctorParameters: () => [] });
|
|
24589
24818
|
|
|
24590
24819
|
class DateRangeInputComponent {
|
|
24591
24820
|
constructor() {
|
|
@@ -24598,6 +24827,8 @@ class DateRangeInputComponent {
|
|
|
24598
24827
|
...(ngDevMode ? [{ debugName: "endAriaLabel" }] : /* istanbul ignore next */ []));
|
|
24599
24828
|
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
24600
24829
|
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
24830
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
24831
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
24601
24832
|
/** Shows a clear (×) control while a value is set and the field is in use. */
|
|
24602
24833
|
this.clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24603
24834
|
this.clearLabel = input(null, /* @ts-ignore */
|
|
@@ -24611,6 +24842,9 @@ class DateRangeInputComponent {
|
|
|
24611
24842
|
/** The string in effect: this instance's `pickerTriggerLabel`, else the domain's label set. */
|
|
24612
24843
|
this.resolvedPickerTriggerLabel = computed(() => this.pickerTriggerLabel() ?? this.dateTimeLabels().openCalendar, /* @ts-ignore */
|
|
24613
24844
|
...(ngDevMode ? [{ debugName: "resolvedPickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
24845
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
24846
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseDateRange, /* @ts-ignore */
|
|
24847
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
24614
24848
|
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
24615
24849
|
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
24616
24850
|
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -24624,7 +24858,7 @@ class DateRangeInputComponent {
|
|
|
24624
24858
|
this.rangeInput.clearRange();
|
|
24625
24859
|
}
|
|
24626
24860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24627
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateRangeInputComponent, isStandalone: true, selector: "et-date-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", 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-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateRangeInputDirective, 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", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "rangeSelectionStrategy", "rangeSelectionStrategy", "comparisonStart", "comparisonStart", "comparisonEnd", "comparisonEnd", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
24861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateRangeInputComponent, isStandalone: true, selector: "et-date-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", 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-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateRangeInputDirective, 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", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "rangeSelectionStrategy", "rangeSelectionStrategy", "comparisonStart", "comparisonStart", "comparisonEnd", "comparisonEnd", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 <et-calendar\n [rangeValue]=\"rangeInput.calendarRange()\"\n [min]=\"rangeInput.minDate()\"\n [max]=\"rangeInput.maxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [precision]=\"rangeInput.precision()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [rangeSelectionStrategy]=\"rangeInput.rangeSelectionStrategy()\"\n [comparisonStart]=\"rangeInput.comparisonStart()\"\n [comparisonEnd]=\"rangeInput.comparisonEnd()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:13em;min-inline-size:0;container:et-date-range-input / inline-size;color:inherit}et-date-range-input .et-date-range-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-date-range-input .et-date-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-range-input .et-date-range-input-field:disabled{cursor:not-allowed}et-date-range-input[data-mixed] .et-date-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-range-input .et-date-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-range-input (inline-size < 13em){et-date-range-input .et-date-range-input-field{flex-basis:100%}et-date-range-input .et-date-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "directive", type: DateRangeInputFieldDirective, selector: "input[etDateRangeInputField]", exportAs: ["etDateRangeInputField"] }, { 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 }); }
|
|
24628
24862
|
}
|
|
24629
24863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputComponent, decorators: [{
|
|
24630
24864
|
type: Component,
|
|
@@ -24677,8 +24911,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
24677
24911
|
class: 'et-date-range-input',
|
|
24678
24912
|
role: 'group',
|
|
24679
24913
|
'[attr.aria-labelledby]': 'rangeInput.labelId()',
|
|
24680
|
-
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
24681
|
-
}], propDecorators: { startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
24914
|
+
}, template: "<input\n [attr.aria-label]=\"resolvedStartAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"start\"\n/>\n\n<span class=\"et-date-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n [attr.aria-label]=\"resolvedEndAriaLabel()\"\n [etInputMask]=\"rangeInput.maskPattern()\"\n class=\"et-date-range-input-field\"\n etDateRangeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 <et-calendar\n [rangeValue]=\"rangeInput.calendarRange()\"\n [min]=\"rangeInput.minDate()\"\n [max]=\"rangeInput.maxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [precision]=\"rangeInput.precision()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [rangeSelectionStrategy]=\"rangeInput.rangeSelectionStrategy()\"\n [comparisonStart]=\"rangeInput.comparisonStart()\"\n [comparisonEnd]=\"rangeInput.comparisonEnd()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:13em;min-inline-size:0;container:et-date-range-input / inline-size;color:inherit}et-date-range-input .et-date-range-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-date-range-input .et-date-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-range-input .et-date-range-input-field:disabled{cursor:not-allowed}et-date-range-input[data-mixed] .et-date-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-range-input .et-date-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-range-input (inline-size < 13em){et-date-range-input .et-date-range-input-field{flex-basis:100%}et-date-range-input .et-date-range-input-separator{display:none}}}\n"] }]
|
|
24915
|
+
}], propDecorators: { startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
24682
24916
|
|
|
24683
24917
|
const DATE_RANGE_INPUT_IMPORTS = [
|
|
24684
24918
|
DateRangeInputComponent,
|
|
@@ -24783,6 +25017,8 @@ const DEFAULT_TIME_PICKER_LABELS = {
|
|
|
24783
25017
|
minutes: 'Minutes',
|
|
24784
25018
|
seconds: 'Seconds',
|
|
24785
25019
|
period: 'AM/PM',
|
|
25020
|
+
startTime: 'Start time',
|
|
25021
|
+
endTime: 'End time',
|
|
24786
25022
|
};
|
|
24787
25023
|
const TIME_PICKER_LABELS_DEF = /* @__PURE__ */ defineLabels('TIME_PICKER_LABELS', DEFAULT_TIME_PICKER_LABELS);
|
|
24788
25024
|
/**
|
|
@@ -24797,6 +25033,8 @@ const provideTimePickerLabels = /* @__PURE__ */ toProvideFn(TIME_PICKER_LABELS_D
|
|
|
24797
25033
|
const injectTimePickerLabels = /* @__PURE__ */ toInjectFn(TIME_PICKER_LABELS_DEF);
|
|
24798
25034
|
const TIME_PICKER_LABELS = /* @__PURE__ */ toToken(TIME_PICKER_LABELS_DEF);
|
|
24799
25035
|
|
|
25036
|
+
/** Coarsest first: a column can only place a range end when every unit above it holds the same value. */
|
|
25037
|
+
const UNITS_COARSEST_FIRST = ['period', 'hour', 'minute', 'second'];
|
|
24800
25038
|
/** The next option a `±1` keyboard step lands on, wrapping and skipping disabled ones. */
|
|
24801
25039
|
const nextEnabledIndex = (options, walk) => {
|
|
24802
25040
|
for (let offset = 1; offset <= options.length; offset++) {
|
|
@@ -24812,12 +25050,19 @@ const nextEnabledIndex = (options, walk) => {
|
|
|
24812
25050
|
* date-fns `format` - hours, minutes, optional seconds and AM/PM), selection
|
|
24813
25051
|
* per column committing into a single `Date` value. Operates on `Date` objects
|
|
24814
25052
|
* only - string parsing/formatting belongs to the input directives.
|
|
25053
|
+
*
|
|
25054
|
+
* In `range` mode the same columns hold a `rangeValue`, one end at a time:
|
|
25055
|
+
* `activeSide` says which, the columns show and a pick writes that end, and the
|
|
25056
|
+
* other end still reads out of them as `rangeStart`/`rangeEnd` and a `band`.
|
|
24815
25057
|
*/
|
|
24816
25058
|
class TimePickerDirective {
|
|
24817
25059
|
constructor() {
|
|
24818
25060
|
this.timePickerLabels = injectTimePickerLabels();
|
|
24819
25061
|
this.defaultFormat = injectTimeFormat();
|
|
24820
25062
|
this.defaultLocale = injectDateLocale();
|
|
25063
|
+
/** Whether the columns hold one time (`value`) or a range (`rangeValue`). */
|
|
25064
|
+
this.mode = input('single', /* @ts-ignore */
|
|
25065
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
24821
25066
|
/** date-fns time format the column layout derives from. Defaults to the `TIME_FORMAT` token. */
|
|
24822
25067
|
this.format = input(undefined, /* @ts-ignore */
|
|
24823
25068
|
...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
@@ -24833,7 +25078,8 @@ class TimePickerDirective {
|
|
|
24833
25078
|
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
24834
25079
|
/**
|
|
24835
25080
|
* Return `false` to make a time unselectable. Receives the full candidate timestamp
|
|
24836
|
-
* (the picked time of day on the current day), so opening hours can differ per weekday
|
|
25081
|
+
* (the picked time of day on the current day), so opening hours can differ per weekday, and in
|
|
25082
|
+
* `range` mode the end being filled. See {@link TimePickerTimeFilterFn}.
|
|
24837
25083
|
*/
|
|
24838
25084
|
this.timeFilter = input(null, /* @ts-ignore */
|
|
24839
25085
|
...(ngDevMode ? [{ debugName: "timeFilter" }] : /* istanbul ignore next */ []));
|
|
@@ -24845,9 +25091,22 @@ class TimePickerDirective {
|
|
|
24845
25091
|
...(ngDevMode ? [{ debugName: "secondsLabel" }] : /* istanbul ignore next */ []));
|
|
24846
25092
|
this.periodLabel = input(null, /* @ts-ignore */
|
|
24847
25093
|
...(ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []));
|
|
24848
|
-
/**
|
|
25094
|
+
/** `range` mode: the two ends' names, on the control that switches between them. */
|
|
25095
|
+
this.startLabel = input(null, /* @ts-ignore */
|
|
25096
|
+
...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
|
|
25097
|
+
this.endLabel = input(null, /* @ts-ignore */
|
|
25098
|
+
...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
|
|
25099
|
+
/** The selected time of day, carried on a `Date`. Stays `null` until a part is picked. `single` mode. */
|
|
24849
25100
|
this.value = model(null, /* @ts-ignore */
|
|
24850
25101
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
25102
|
+
/** `range` mode: the two selected times. An end stays `null` until one of its parts is picked. */
|
|
25103
|
+
this.rangeValue = model({ start: null, end: null }, /* @ts-ignore */
|
|
25104
|
+
...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
|
|
25105
|
+
/** `range` mode: the end the columns show, and the one a pick writes. */
|
|
25106
|
+
this.activeSide = model('start', /* @ts-ignore */
|
|
25107
|
+
...(ngDevMode ? [{ debugName: "activeSide" }] : /* istanbul ignore next */ []));
|
|
25108
|
+
/** `range` mode: a part was picked. The side is what a range-valued consumer cannot infer. */
|
|
25109
|
+
this.timeSelect = output();
|
|
24851
25110
|
/** The string in effect: this instance's `hoursLabel`, else the domain's label set. */
|
|
24852
25111
|
this.resolvedHoursLabel = computed(() => this.hoursLabel() ?? this.timePickerLabels().hours, /* @ts-ignore */
|
|
24853
25112
|
...(ngDevMode ? [{ debugName: "resolvedHoursLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -24860,14 +25119,50 @@ class TimePickerDirective {
|
|
|
24860
25119
|
/** The string in effect: this instance's `periodLabel`, else the domain's label set. */
|
|
24861
25120
|
this.resolvedPeriodLabel = computed(() => this.periodLabel() ?? this.timePickerLabels().period, /* @ts-ignore */
|
|
24862
25121
|
...(ngDevMode ? [{ debugName: "resolvedPeriodLabel" }] : /* istanbul ignore next */ []));
|
|
25122
|
+
/** The string in effect: this instance's `startLabel`, else the domain's label set. */
|
|
25123
|
+
this.resolvedStartLabel = computed(() => this.startLabel() ?? this.timePickerLabels().startTime, /* @ts-ignore */
|
|
25124
|
+
...(ngDevMode ? [{ debugName: "resolvedStartLabel" }] : /* istanbul ignore next */ []));
|
|
25125
|
+
/** The string in effect: this instance's `endLabel`, else the domain's label set. */
|
|
25126
|
+
this.resolvedEndLabel = computed(() => this.endLabel() ?? this.timePickerLabels().endTime, /* @ts-ignore */
|
|
25127
|
+
...(ngDevMode ? [{ debugName: "resolvedEndLabel" }] : /* istanbul ignore next */ []));
|
|
24863
25128
|
// the initial focus/scroll anchor while no value exists
|
|
24864
25129
|
this.now = new Date();
|
|
25130
|
+
this.autoAdvanceSpent = signal(false, /* @ts-ignore */
|
|
25131
|
+
...(ngDevMode ? [{ debugName: "autoAdvanceSpent" }] : /* istanbul ignore next */ []));
|
|
24865
25132
|
this.effectiveFormat = computed(() => this.format() ?? this.defaultFormat, /* @ts-ignore */
|
|
24866
25133
|
...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
|
|
24867
25134
|
this.effectiveLocale = computed(() => this.locale() ?? this.defaultLocale, /* @ts-ignore */
|
|
24868
25135
|
...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
|
|
24869
25136
|
this.formatSpec = computed(() => deriveTimeFormatSpec({ format: this.effectiveFormat(), locale: this.effectiveLocale() }), /* @ts-ignore */
|
|
24870
25137
|
...(ngDevMode ? [{ debugName: "formatSpec" }] : /* istanbul ignore next */ []));
|
|
25138
|
+
/** The value the columns show and a pick writes: the whole value, or the range's active end. */
|
|
25139
|
+
this.activeValue = computed(() => (this.mode() === 'range' ? this.rangeValue()[this.activeSide()] : this.value()), /* @ts-ignore */
|
|
25140
|
+
...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
|
|
25141
|
+
/**
|
|
25142
|
+
* A bare time format matching the columns in play, rather than `format` itself - a host that
|
|
25143
|
+
* derives its columns from a *combined* date & time format (the date-time range input passes `Pp`)
|
|
25144
|
+
* still needs the two ends to read as times.
|
|
25145
|
+
*/
|
|
25146
|
+
this.sideFormat = computed(() => {
|
|
25147
|
+
const spec = this.formatSpec();
|
|
25148
|
+
return spec.hourCycle === 12 ? `h:mm${spec.showSeconds ? ':ss' : ''} a` : `HH:mm${spec.showSeconds ? ':ss' : ''}`;
|
|
25149
|
+
}, /* @ts-ignore */
|
|
25150
|
+
...(ngDevMode ? [{ debugName: "sideFormat" }] : /* istanbul ignore next */ []));
|
|
25151
|
+
/**
|
|
25152
|
+
* The two ends as a side switch needs them: which end, its name, its value as a bare time, and
|
|
25153
|
+
* whether the columns are currently editing it.
|
|
25154
|
+
*/
|
|
25155
|
+
this.sides = computed(() => {
|
|
25156
|
+
const range = this.rangeValue();
|
|
25157
|
+
const active = this.activeSide();
|
|
25158
|
+
const options = { format: this.sideFormat(), locale: this.effectiveLocale() };
|
|
25159
|
+
const rendered = (time) => (time === null ? null : formatDateValue(time, options));
|
|
25160
|
+
return [
|
|
25161
|
+
{ side: 'start', label: this.resolvedStartLabel(), value: rendered(range.start), active: active === 'start' },
|
|
25162
|
+
{ side: 'end', label: this.resolvedEndLabel(), value: rendered(range.end), active: active === 'end' },
|
|
25163
|
+
];
|
|
25164
|
+
}, /* @ts-ignore */
|
|
25165
|
+
...(ngDevMode ? [{ debugName: "sides" }] : /* istanbul ignore next */ []));
|
|
24871
25166
|
/**
|
|
24872
25167
|
* The value, or "now" snapped to the steps - the time the columns anchor
|
|
24873
25168
|
* their roving focus and initial scroll position to, and the base a first
|
|
@@ -24875,7 +25170,7 @@ class TimePickerDirective {
|
|
|
24875
25170
|
* so a completed anchor never carries an invisible seconds part.
|
|
24876
25171
|
*/
|
|
24877
25172
|
this.anchorTime = computed(() => {
|
|
24878
|
-
const value = this.
|
|
25173
|
+
const value = this.activeValue();
|
|
24879
25174
|
if (value !== null) {
|
|
24880
25175
|
return value;
|
|
24881
25176
|
}
|
|
@@ -24895,12 +25190,25 @@ class TimePickerDirective {
|
|
|
24895
25190
|
];
|
|
24896
25191
|
}, /* @ts-ignore */
|
|
24897
25192
|
...(ngDevMode ? [{ debugName: "periodLabels" }] : /* istanbul ignore next */ []));
|
|
24898
|
-
/** The value's column values, or `null` while empty - hours in the format's cycle. */
|
|
25193
|
+
/** The active value's column values, or `null` while empty - hours in the format's cycle. */
|
|
24899
25194
|
this.selectedParts = computed(() => {
|
|
24900
|
-
const value = this.
|
|
25195
|
+
const value = this.activeValue();
|
|
24901
25196
|
return value !== null ? getTimeParts(value, this.formatSpec().hourCycle) : null;
|
|
24902
25197
|
}, /* @ts-ignore */
|
|
24903
25198
|
...(ngDevMode ? [{ debugName: "selectedParts" }] : /* istanbul ignore next */ []));
|
|
25199
|
+
/** Both range ends' column values, `null` outside `range` mode. */
|
|
25200
|
+
this.rangeParts = computed(() => {
|
|
25201
|
+
if (this.mode() !== 'range') {
|
|
25202
|
+
return null;
|
|
25203
|
+
}
|
|
25204
|
+
const range = this.rangeValue();
|
|
25205
|
+
const cycle = this.formatSpec().hourCycle;
|
|
25206
|
+
return {
|
|
25207
|
+
start: range.start === null ? null : getTimeParts(range.start, cycle),
|
|
25208
|
+
end: range.end === null ? null : getTimeParts(range.end, cycle),
|
|
25209
|
+
};
|
|
25210
|
+
}, /* @ts-ignore */
|
|
25211
|
+
...(ngDevMode ? [{ debugName: "rangeParts" }] : /* istanbul ignore next */ []));
|
|
24904
25212
|
this.hourValues = computed(() => generateSteppedValues({ end: this.formatSpec().hourCycle === 12 ? 12 : 24, step: 1 }), /* @ts-ignore */
|
|
24905
25213
|
...(ngDevMode ? [{ debugName: "hourValues" }] : /* istanbul ignore next */ []));
|
|
24906
25214
|
this.minuteValues = computed(() => generateSteppedValues({ end: 60, step: this.minuteStep(), include: this.selectedParts()?.minute }), /* @ts-ignore */
|
|
@@ -24910,12 +25218,22 @@ class TimePickerDirective {
|
|
|
24910
25218
|
/** Whether any bound or filter is in play - the unconstrained picker skips availability work entirely. */
|
|
24911
25219
|
this.constrained = computed(() => this.min() !== null || this.max() !== null || this.timeFilter() !== null, /* @ts-ignore */
|
|
24912
25220
|
...(ngDevMode ? [{ debugName: "constrained" }] : /* istanbul ignore next */ []));
|
|
25221
|
+
/** `timeFilter` with the end it is filling already applied - what the availability layer takes. */
|
|
25222
|
+
this.boundTimeFilter = computed(() => {
|
|
25223
|
+
const filter = this.timeFilter();
|
|
25224
|
+
if (filter === null) {
|
|
25225
|
+
return null;
|
|
25226
|
+
}
|
|
25227
|
+
const side = this.activeSide();
|
|
25228
|
+
return (date) => filter(date, side);
|
|
25229
|
+
}, /* @ts-ignore */
|
|
25230
|
+
...(ngDevMode ? [{ debugName: "boundTimeFilter" }] : /* istanbul ignore next */ []));
|
|
24913
25231
|
this.availability = computed(() => {
|
|
24914
25232
|
const anchor = this.anchorTime();
|
|
24915
25233
|
return {
|
|
24916
25234
|
min: this.min(),
|
|
24917
25235
|
max: this.max(),
|
|
24918
|
-
filter: this.
|
|
25236
|
+
filter: this.boundTimeFilter(),
|
|
24919
25237
|
day: startOfDay(anchor),
|
|
24920
25238
|
minuteValues: this.minuteValues(),
|
|
24921
25239
|
// without a seconds column the second never moves - the committed one is the only candidate
|
|
@@ -24931,10 +25249,12 @@ class TimePickerDirective {
|
|
|
24931
25249
|
const constrained = this.constrained();
|
|
24932
25250
|
const availability = this.availability();
|
|
24933
25251
|
const isDisabled = (fixed) => constrained && !hasSelectableTime(fixed, availability);
|
|
25252
|
+
const rangeFlagsFor = this.rangeFlagsFactory({ anchor, hourCycle: spec.hourCycle });
|
|
24934
25253
|
const buildOptions = (unit, column) => {
|
|
24935
25254
|
const toLabel = unit === 'hour' && spec.hourCycle === 12
|
|
24936
25255
|
? (hour) => String(hour === 0 ? 12 : hour)
|
|
24937
25256
|
: (part) => String(part).padStart(2, '0');
|
|
25257
|
+
const rangeFlags = rangeFlagsFor(unit);
|
|
24938
25258
|
return column.values.map((optionValue) => ({
|
|
24939
25259
|
unit,
|
|
24940
25260
|
value: optionValue,
|
|
@@ -24942,6 +25262,7 @@ class TimePickerDirective {
|
|
|
24942
25262
|
selected: selected !== null && selected[unit] === optionValue,
|
|
24943
25263
|
disabled: isDisabled(column.fixedOf(optionValue)),
|
|
24944
25264
|
focused: (selected ?? anchor)[unit] === optionValue,
|
|
25265
|
+
...rangeFlags(optionValue),
|
|
24945
25266
|
}));
|
|
24946
25267
|
};
|
|
24947
25268
|
const columns = [
|
|
@@ -24974,6 +25295,7 @@ class TimePickerDirective {
|
|
|
24974
25295
|
}
|
|
24975
25296
|
if (spec.hourCycle === 12) {
|
|
24976
25297
|
const labels = this.periodLabels();
|
|
25298
|
+
const rangeFlags = rangeFlagsFor('period');
|
|
24977
25299
|
columns.push({
|
|
24978
25300
|
unit: 'period',
|
|
24979
25301
|
label: this.resolvedPeriodLabel(),
|
|
@@ -24986,6 +25308,7 @@ class TimePickerDirective {
|
|
|
24986
25308
|
disabled: constrained &&
|
|
24987
25309
|
!this.hourValues().some((hour) => hasSelectableTime({ hour: hour + period * 12 }, availability)),
|
|
24988
25310
|
focused: (selected ?? anchor).period === period,
|
|
25311
|
+
...rangeFlags(period),
|
|
24989
25312
|
})),
|
|
24990
25313
|
});
|
|
24991
25314
|
}
|
|
@@ -25008,7 +25331,35 @@ class TimePickerDirective {
|
|
|
25008
25331
|
if (resolved === null) {
|
|
25009
25332
|
return;
|
|
25010
25333
|
}
|
|
25011
|
-
|
|
25334
|
+
const next = setTimeOfDay(this.anchorTime(), resolved);
|
|
25335
|
+
if (this.mode() !== 'range') {
|
|
25336
|
+
this.value.set(next);
|
|
25337
|
+
return;
|
|
25338
|
+
}
|
|
25339
|
+
const side = this.activeSide();
|
|
25340
|
+
this.rangeValue.set({ ...this.rangeValue(), [side]: next });
|
|
25341
|
+
this.timeSelect.emit({ side, time: next });
|
|
25342
|
+
}
|
|
25343
|
+
/**
|
|
25344
|
+
* @internal What *activating* an option does (click, Enter, Space): the pick, plus a range's
|
|
25345
|
+
* one-time hop to the other end - the first committed start opens the end, the way a calendar's
|
|
25346
|
+
* first pick opens its range. The keyboard model deliberately routes through {@link selectPart}
|
|
25347
|
+
* instead: arrows commit as they move, so hopping there would strand the reader on the other end
|
|
25348
|
+
* halfway through browsing this one.
|
|
25349
|
+
*/
|
|
25350
|
+
activateOption(unit, optionValue) {
|
|
25351
|
+
const hops = this.mode() === 'range' && this.activeSide() === 'start' && !this.autoAdvanceSpent();
|
|
25352
|
+
const startBefore = this.rangeValue().start;
|
|
25353
|
+
this.selectPart(unit, optionValue);
|
|
25354
|
+
if (hops && this.rangeValue().start !== startBefore) {
|
|
25355
|
+
this.autoAdvanceSpent.set(true);
|
|
25356
|
+
this.activeSide.set('end');
|
|
25357
|
+
}
|
|
25358
|
+
}
|
|
25359
|
+
/** Switches the end the columns edit, spending the one-time auto-advance - an explicit choice wins. */
|
|
25360
|
+
setActiveSide(side) {
|
|
25361
|
+
this.autoAdvanceSpent.set(true);
|
|
25362
|
+
this.activeSide.set(side);
|
|
25012
25363
|
}
|
|
25013
25364
|
/** @internal Moves a column's selection by `delta`, wrapping and skipping disabled options. */
|
|
25014
25365
|
selectRelative(unit, delta) {
|
|
@@ -25048,6 +25399,48 @@ class TimePickerDirective {
|
|
|
25048
25399
|
this.selectPart(unit, match.value);
|
|
25049
25400
|
}
|
|
25050
25401
|
}
|
|
25402
|
+
/**
|
|
25403
|
+
* Builds the per-column reader for how an option relates to the *range* - which end it holds, and
|
|
25404
|
+
* where in the band between the two ends it sits.
|
|
25405
|
+
*
|
|
25406
|
+
* A column can only place an end when every **coarser** unit of that end matches what the columns
|
|
25407
|
+
* are showing: the minutes column may say where 09:15's `15` is while the hours sit on 9, but not
|
|
25408
|
+
* while they sit on 17, where minute 15 belongs to a different hour and would read as an endpoint
|
|
25409
|
+
* it is not. That one rule is what keeps the hours banded across 09:00–17:30 while the minutes stay
|
|
25410
|
+
* plain, and what stops a 12-hour hours column from banding 9 AM to 5 PM, whose column order is not
|
|
25411
|
+
* chronological across the half-day boundary.
|
|
25412
|
+
*
|
|
25413
|
+
* Within a column, option *values* ascend with time in every unit - hours `0–23`, `0–11` inside a
|
|
25414
|
+
* half-day, stepped minutes and seconds, AM before PM - so the band is a plain numeric interval.
|
|
25415
|
+
*/
|
|
25416
|
+
rangeFlagsFactory(context) {
|
|
25417
|
+
const rangeParts = this.rangeParts();
|
|
25418
|
+
return (unit) => {
|
|
25419
|
+
const coarser = UNITS_COARSEST_FIRST.slice(0, UNITS_COARSEST_FIRST.indexOf(unit)).filter((coarserUnit) => coarserUnit !== 'period' || context.hourCycle === 12);
|
|
25420
|
+
const placeable = (parts) => parts !== null && coarser.every((coarserUnit) => parts[coarserUnit] === context.anchor[coarserUnit])
|
|
25421
|
+
? parts
|
|
25422
|
+
: null;
|
|
25423
|
+
const start = placeable(rangeParts?.start ?? null);
|
|
25424
|
+
const end = placeable(rangeParts?.end ?? null);
|
|
25425
|
+
const bounds = start === null || end === null || start[unit] === end[unit]
|
|
25426
|
+
? null
|
|
25427
|
+
: { from: Math.min(start[unit], end[unit]), to: Math.max(start[unit], end[unit]) };
|
|
25428
|
+
const bandOf = (optionValue) => {
|
|
25429
|
+
if (bounds === null || optionValue < bounds.from || optionValue > bounds.to) {
|
|
25430
|
+
return null;
|
|
25431
|
+
}
|
|
25432
|
+
if (optionValue === bounds.from) {
|
|
25433
|
+
return 'start';
|
|
25434
|
+
}
|
|
25435
|
+
return optionValue === bounds.to ? 'end' : 'middle';
|
|
25436
|
+
};
|
|
25437
|
+
return (optionValue) => ({
|
|
25438
|
+
rangeStart: start !== null && start[unit] === optionValue,
|
|
25439
|
+
rangeEnd: end !== null && end[unit] === optionValue,
|
|
25440
|
+
band: bandOf(optionValue),
|
|
25441
|
+
});
|
|
25442
|
+
};
|
|
25443
|
+
}
|
|
25051
25444
|
/** The 24-hour value a column option stands for, given the half-day in effect. */
|
|
25052
25445
|
toHour24(hour, period) {
|
|
25053
25446
|
return this.formatSpec().hourCycle === 12 ? (hour % 12) + period * 12 : hour;
|
|
@@ -25104,7 +25497,7 @@ class TimePickerDirective {
|
|
|
25104
25497
|
return this.columns().find((column) => column.unit === unit)?.options ?? [];
|
|
25105
25498
|
}
|
|
25106
25499
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
25107
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TimePickerDirective, isStandalone: true, selector: "[etTimePicker]", inputs: { 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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 }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null }, periodLabel: { classPropertyName: "periodLabel", publicName: "periodLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, exportAs: ["etTimePicker"], ngImport: i0 }); }
|
|
25500
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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 }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null }, periodLabel: { classPropertyName: "periodLabel", publicName: "periodLabel", 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 } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeSide: "activeSideChange", timeSelect: "timeSelect" }, exportAs: ["etTimePicker"], ngImport: i0 }); }
|
|
25108
25501
|
}
|
|
25109
25502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerDirective, decorators: [{
|
|
25110
25503
|
type: Directive,
|
|
@@ -25112,7 +25505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25112
25505
|
selector: '[etTimePicker]',
|
|
25113
25506
|
exportAs: 'etTimePicker',
|
|
25114
25507
|
}]
|
|
25115
|
-
}], propDecorators: { 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], secondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsLabel", required: false }] }], periodLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
25508
|
+
}], 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], secondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsLabel", required: false }] }], periodLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodLabel", 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"] }], timeSelect: [{ type: i0.Output, args: ["timeSelect"] }] } });
|
|
25116
25509
|
|
|
25117
25510
|
/**
|
|
25118
25511
|
* One unit column (a vertical listbox): routes the keyboard model to the
|
|
@@ -25225,6 +25618,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25225
25618
|
* One option (place it on the option's `<button>`): ARIA/data attributes,
|
|
25226
25619
|
* selection on activation, the roving-tabindex focus pull, and keeping the
|
|
25227
25620
|
* column scrolled to the focused option.
|
|
25621
|
+
*
|
|
25622
|
+
* In the picker's `range` mode it also mirrors the option's relation to the
|
|
25623
|
+
* range: `data-range-start` / `data-range-end` for the two ends' own options
|
|
25624
|
+
* (the end that is not selected is the one worth drawing differently) and
|
|
25625
|
+
* `data-band` for its position in the band between them.
|
|
25228
25626
|
*/
|
|
25229
25627
|
class TimePickerOptionDirective {
|
|
25230
25628
|
constructor() {
|
|
@@ -25254,7 +25652,7 @@ class TimePickerOptionDirective {
|
|
|
25254
25652
|
});
|
|
25255
25653
|
}
|
|
25256
25654
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
25257
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TimePickerOptionDirective, isStandalone: true, selector: "button[etTimePickerOption]", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "timePicker?.
|
|
25655
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TimePickerOptionDirective, isStandalone: true, selector: "button[etTimePickerOption]", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "timePicker?.activateOption(option().unit, option().value)" }, properties: { "attr.aria-selected": "option().selected", "attr.aria-disabled": "option().disabled || null", "attr.tabindex": "option().focused ? 0 : -1", "attr.data-selected": "option().selected ? '' : null", "attr.data-disabled": "option().disabled ? '' : null", "attr.data-focused": "option().focused ? '' : null", "attr.data-range-start": "option().rangeStart ? '' : null", "attr.data-range-end": "option().rangeEnd ? '' : null", "attr.data-band": "option().band" } }, exportAs: ["etTimePickerOption"], ngImport: i0 }); }
|
|
25258
25656
|
}
|
|
25259
25657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerOptionDirective, decorators: [{
|
|
25260
25658
|
type: Directive,
|
|
@@ -25271,7 +25669,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25271
25669
|
'[attr.data-selected]': "option().selected ? '' : null",
|
|
25272
25670
|
'[attr.data-disabled]': "option().disabled ? '' : null",
|
|
25273
25671
|
'[attr.data-focused]': "option().focused ? '' : null",
|
|
25274
|
-
'
|
|
25672
|
+
'[attr.data-range-start]': "option().rangeStart ? '' : null",
|
|
25673
|
+
'[attr.data-range-end]': "option().rangeEnd ? '' : null",
|
|
25674
|
+
'[attr.data-band]': 'option().band',
|
|
25675
|
+
'(click)': 'timePicker?.activateOption(option().unit, option().value)',
|
|
25275
25676
|
},
|
|
25276
25677
|
}]
|
|
25277
25678
|
}], ctorParameters: () => [], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }] } });
|
|
@@ -25281,7 +25682,7 @@ class TimePickerComponent {
|
|
|
25281
25682
|
this.timePicker = inject(TimePickerDirective);
|
|
25282
25683
|
}
|
|
25283
25684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { classAttribute: "et-time-picker" }, hostDirectives: [{ directive: TimePickerDirective, inputs: ["format", "format", "locale", "locale", "minuteStep", "minuteStep", "secondStep", "secondStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "hoursLabel", "hoursLabel", "minutesLabel", "minutesLabel", "secondsLabel", "secondsLabel", "periodLabel", "periodLabel", "value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: "@for (column of timePicker.columns(); track column.unit) {\n
|
|
25685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()" }, classAttribute: "et-time-picker" }, hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "secondStep", "secondStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "hoursLabel", "hoursLabel", "minutesLabel", "minutesLabel", "secondsLabel", "secondsLabel", "periodLabel", "periodLabel", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect"] }], ngImport: i0, template: "@if (timePicker.mode() === 'range') {\n <div class=\"et-time-picker-sides\">\n @for (side of timePicker.sides(); track side.side) {\n <button\n [attr.aria-pressed]=\"side.active\"\n [attr.data-side]=\"side.side\"\n (click)=\"timePicker.setActiveSide(side.side)\"\n class=\"et-time-picker-side\"\n type=\"button\"\n >\n <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"et-time-picker-columns\">\n @for (column of timePicker.columns(); track column.unit) {\n <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n @for (option of column.options; track option.value) {\n <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n }\n </div>\n }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start]):before{inset-block-start:50%}.et-time-picker .et-time-picker-option:where([data-band=end]):before{inset-block-end:50%}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"], dependencies: [{ kind: "directive", type: TimePickerColumnDirective, selector: "[etTimePickerColumn]", inputs: ["column"], exportAs: ["etTimePickerColumn"] }, { kind: "directive", type: TimePickerOptionDirective, selector: "button[etTimePickerOption]", inputs: ["option"], exportAs: ["etTimePickerOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
25285
25686
|
}
|
|
25286
25687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
25287
25688
|
type: Component,
|
|
@@ -25289,6 +25690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25289
25690
|
{
|
|
25290
25691
|
directive: TimePickerDirective,
|
|
25291
25692
|
inputs: [
|
|
25693
|
+
'mode',
|
|
25292
25694
|
'format',
|
|
25293
25695
|
'locale',
|
|
25294
25696
|
'minuteStep',
|
|
@@ -25300,13 +25702,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25300
25702
|
'minutesLabel',
|
|
25301
25703
|
'secondsLabel',
|
|
25302
25704
|
'periodLabel',
|
|
25705
|
+
'startLabel',
|
|
25706
|
+
'endLabel',
|
|
25303
25707
|
'value',
|
|
25708
|
+
'rangeValue',
|
|
25709
|
+
'activeSide',
|
|
25304
25710
|
],
|
|
25305
|
-
outputs: ['valueChange'],
|
|
25711
|
+
outputs: ['valueChange', 'rangeValueChange', 'activeSideChange', 'timeSelect'],
|
|
25306
25712
|
},
|
|
25307
25713
|
], host: {
|
|
25308
25714
|
class: 'et-time-picker',
|
|
25309
|
-
|
|
25715
|
+
'[attr.data-mode]': 'timePicker.mode()',
|
|
25716
|
+
}, template: "@if (timePicker.mode() === 'range') {\n <div class=\"et-time-picker-sides\">\n @for (side of timePicker.sides(); track side.side) {\n <button\n [attr.aria-pressed]=\"side.active\"\n [attr.data-side]=\"side.side\"\n (click)=\"timePicker.setActiveSide(side.side)\"\n class=\"et-time-picker-side\"\n type=\"button\"\n >\n <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"et-time-picker-columns\">\n @for (column of timePicker.columns(); track column.unit) {\n <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n @for (option of column.options; track option.value) {\n <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n }\n </div>\n }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start]):before{inset-block-start:50%}.et-time-picker .et-time-picker-option:where([data-band=end]):before{inset-block-end:50%}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"] }]
|
|
25310
25717
|
}] });
|
|
25311
25718
|
|
|
25312
25719
|
const TIME_PICKER_IMPORTS = [
|
|
@@ -25951,12 +26358,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
25951
26358
|
|
|
25952
26359
|
const COMPENSATION_DURATION = 160;
|
|
25953
26360
|
const COMPENSATION_EASING = 'ease';
|
|
26361
|
+
/** The time picker's own rows: its columns, and a range picker's side switch above them. */
|
|
26362
|
+
const PICKER_ROWS$1 = '.et-time-picker-sides, .et-time-picker-columns';
|
|
25954
26363
|
/**
|
|
25955
|
-
* @internal Applied to the pane row of
|
|
25956
|
-
*
|
|
25957
|
-
*
|
|
25958
|
-
*
|
|
25959
|
-
* `translateY` compensation.
|
|
26364
|
+
* @internal Applied to the pane row of a date-time picker panel: when month navigation changes the
|
|
26365
|
+
* calendar height, the stretched time picker follows instantly and its vertically centered content
|
|
26366
|
+
* jumps by half the delta. This slides that content from its old visual position to the new one with
|
|
26367
|
+
* a `translateY` compensation.
|
|
25960
26368
|
*
|
|
25961
26369
|
* Deliberately a transform, never an animated `block-size`: transforms stay
|
|
25962
26370
|
* out of layout, so the panel body still changes in a single snap and the
|
|
@@ -25966,12 +26374,12 @@ const COMPENSATION_EASING = 'ease';
|
|
|
25966
26374
|
* on shrink the panel would chase a per-frame moving target and finish long
|
|
25967
26375
|
* after the columns settled.
|
|
25968
26376
|
*/
|
|
25969
|
-
class
|
|
26377
|
+
class DateTimePickerPanesDirective {
|
|
25970
26378
|
constructor() {
|
|
25971
26379
|
this.destroyRef = inject(DestroyRef);
|
|
25972
26380
|
this.prefersReducedMotion = injectPrefersReducedMotion();
|
|
26381
|
+
this.host = inject(ElementRef);
|
|
25973
26382
|
this.calendar = contentChild(CalendarComponent, { ...(ngDevMode ? { debugName: "calendar" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
25974
|
-
this.timePicker = contentChild(TimePickerComponent, { ...(ngDevMode ? { debugName: "timePicker" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
25975
26383
|
this.lastBlockSize = null;
|
|
25976
26384
|
this.ready = false;
|
|
25977
26385
|
this.animations = [];
|
|
@@ -25996,7 +26404,7 @@ class DateTimeInputPanesDirective {
|
|
|
25996
26404
|
});
|
|
25997
26405
|
// the settled first-render height is the baseline - opening never animates
|
|
25998
26406
|
afterNextRender(() => {
|
|
25999
|
-
this.lastBlockSize = this.
|
|
26407
|
+
this.lastBlockSize = this.measure();
|
|
26000
26408
|
this.ready = true;
|
|
26001
26409
|
});
|
|
26002
26410
|
this.destroyRef.onDestroy(() => {
|
|
@@ -26005,13 +26413,9 @@ class DateTimeInputPanesDirective {
|
|
|
26005
26413
|
});
|
|
26006
26414
|
}
|
|
26007
26415
|
compensate() {
|
|
26008
|
-
const
|
|
26009
|
-
if (!timePicker) {
|
|
26010
|
-
return;
|
|
26011
|
-
}
|
|
26012
|
-
const blockSize = timePicker.getBoundingClientRect().height;
|
|
26416
|
+
const blockSize = this.measure();
|
|
26013
26417
|
// never record or compensate a zero / pre-layout height
|
|
26014
|
-
if (blockSize === 0) {
|
|
26418
|
+
if (blockSize === null || blockSize === 0) {
|
|
26015
26419
|
return;
|
|
26016
26420
|
}
|
|
26017
26421
|
const previous = this.lastBlockSize;
|
|
@@ -26019,26 +26423,32 @@ class DateTimeInputPanesDirective {
|
|
|
26019
26423
|
if (previous === null || Math.abs(previous - blockSize) < 1 || this.prefersReducedMotion()) {
|
|
26020
26424
|
return;
|
|
26021
26425
|
}
|
|
26022
|
-
// eslint-disable-next-line ethlete/no-dom-query -- the
|
|
26023
|
-
const
|
|
26024
|
-
const
|
|
26025
|
-
if (!
|
|
26426
|
+
// eslint-disable-next-line ethlete/no-dom-query -- the rows live inside et-time-picker's own view, out of reach of a content query from here
|
|
26427
|
+
const rows = Array.from(this.host.nativeElement.querySelectorAll(PICKER_ROWS$1));
|
|
26428
|
+
const firstRow = rows[0];
|
|
26429
|
+
if (!firstRow) {
|
|
26026
26430
|
return;
|
|
26027
26431
|
}
|
|
26028
|
-
// the centered
|
|
26432
|
+
// the centered content moved by half the height delta; continue from the
|
|
26029
26433
|
// current visual offset when interrupting a running compensation
|
|
26030
|
-
const offset = (previous - blockSize) / 2 + this.currentOffset(
|
|
26434
|
+
const offset = (previous - blockSize) / 2 + this.currentOffset(firstRow);
|
|
26031
26435
|
this.cancelAnimations();
|
|
26032
|
-
this.animations =
|
|
26436
|
+
this.animations = rows.map((row) => row.animate([{ transform: `translateY(${offset}px)` }, { transform: 'translateY(0)' }], {
|
|
26033
26437
|
duration: COMPENSATION_DURATION,
|
|
26034
26438
|
easing: COMPENSATION_EASING,
|
|
26035
26439
|
}));
|
|
26036
26440
|
}
|
|
26037
|
-
|
|
26441
|
+
// the panes are stretched to one row, so every time picker has the same height
|
|
26442
|
+
measure() {
|
|
26443
|
+
// eslint-disable-next-line ethlete/no-dom-query -- see compensate()
|
|
26444
|
+
const timePicker = this.host.nativeElement.querySelector('.et-time-picker');
|
|
26445
|
+
return timePicker?.getBoundingClientRect().height ?? null;
|
|
26446
|
+
}
|
|
26447
|
+
currentOffset(row) {
|
|
26038
26448
|
if (!this.animations.some((animation) => animation.playState === 'running')) {
|
|
26039
26449
|
return 0;
|
|
26040
26450
|
}
|
|
26041
|
-
const transform = getComputedStyle(
|
|
26451
|
+
const transform = getComputedStyle(row).transform;
|
|
26042
26452
|
const translateY = /matrix\(([^)]+)\)/.exec(transform)?.[1]?.split(',')[5];
|
|
26043
26453
|
const offset = translateY === undefined ? 0 : Number(translateY);
|
|
26044
26454
|
return Number.isFinite(offset) ? offset : 0;
|
|
@@ -26049,20 +26459,21 @@ class DateTimeInputPanesDirective {
|
|
|
26049
26459
|
}
|
|
26050
26460
|
this.animations = [];
|
|
26051
26461
|
}
|
|
26052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type:
|
|
26053
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", type:
|
|
26462
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimePickerPanesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
26463
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", type: DateTimePickerPanesDirective, isStandalone: true, selector: "[etDateTimePickerPanes]", queries: [{ propertyName: "calendar", first: true, predicate: CalendarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
|
|
26054
26464
|
}
|
|
26055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type:
|
|
26465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimePickerPanesDirective, decorators: [{
|
|
26056
26466
|
type: Directive,
|
|
26057
26467
|
args: [{
|
|
26058
|
-
selector: '[
|
|
26468
|
+
selector: '[etDateTimePickerPanes]',
|
|
26059
26469
|
}]
|
|
26060
26470
|
}], ctorParameters: () => [], propDecorators: { calendar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarComponent), { ...{
|
|
26061
26471
|
read: ElementRef,
|
|
26062
|
-
}, isSignal: true }] }], timePicker: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimePickerComponent), { ...{
|
|
26063
|
-
read: ElementRef,
|
|
26064
26472
|
}, isSignal: true }] }] } });
|
|
26065
26473
|
|
|
26474
|
+
/** The day of `day` carrying the time of day of `time` - how the date-time controls merge a pick. */
|
|
26475
|
+
const withTimeOfDay = (day, time) => setSeconds(setMinutes(setHours(startOfDay(day), time.getHours()), time.getMinutes()), time.getSeconds());
|
|
26476
|
+
|
|
26066
26477
|
const MERIDIEM_PATTERN = /\s*([ap])\.?\s*(?:m\.?)?$/i;
|
|
26067
26478
|
const SEPARATED_PATTERN = /^(\d{1,2})(?:[:.\s](\d{1,2})(?:[:.\s](\d{1,2}))?)?$/;
|
|
26068
26479
|
const COMPACT_PATTERN = /^\d{3,6}$/;
|
|
@@ -26301,10 +26712,7 @@ class DateTimeInputDirective extends DatePickerInputDirective {
|
|
|
26301
26712
|
return;
|
|
26302
26713
|
}
|
|
26303
26714
|
const current = this.dateTime();
|
|
26304
|
-
|
|
26305
|
-
this.commitDateTime(current === null
|
|
26306
|
-
? day
|
|
26307
|
-
: setSeconds(setMinutes(setHours(day, current.getHours()), current.getMinutes()), current.getSeconds()));
|
|
26715
|
+
this.commitDateTime(current === null ? startOfDay(date) : withTimeOfDay(date, current));
|
|
26308
26716
|
this.touched.set(true);
|
|
26309
26717
|
}
|
|
26310
26718
|
/**
|
|
@@ -26317,8 +26725,7 @@ class DateTimeInputDirective extends DatePickerInputDirective {
|
|
|
26317
26725
|
return;
|
|
26318
26726
|
}
|
|
26319
26727
|
const current = this.dateTime();
|
|
26320
|
-
|
|
26321
|
-
this.commitDateTime(setSeconds(setMinutes(setHours(day, time.getHours()), time.getMinutes()), time.getSeconds()));
|
|
26728
|
+
this.commitDateTime(withTimeOfDay(current ?? time, time));
|
|
26322
26729
|
this.touched.set(true);
|
|
26323
26730
|
}
|
|
26324
26731
|
commitDateTime(dateTime) {
|
|
@@ -26378,6 +26785,8 @@ class DateTimeInputComponent {
|
|
|
26378
26785
|
this.dateTimeInput = inject(DateTimeInputDirective);
|
|
26379
26786
|
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
26380
26787
|
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
26788
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
26789
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
26381
26790
|
this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
26382
26791
|
this.secondStep = input(1, { ...(ngDevMode ? { debugName: "secondStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
26383
26792
|
/** Labels of the pane tabs shown when the picker mounts as a bottom sheet. */
|
|
@@ -26398,6 +26807,9 @@ class DateTimeInputComponent {
|
|
|
26398
26807
|
/** The string in effect: this instance's `timeTabLabel`, else the domain's label set. */
|
|
26399
26808
|
this.resolvedTimeTabLabel = computed(() => this.timeTabLabel() ?? this.dateTimeLabels().timeTab, /* @ts-ignore */
|
|
26400
26809
|
...(ngDevMode ? [{ debugName: "resolvedTimeTabLabel" }] : /* istanbul ignore next */ []));
|
|
26810
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
26811
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseDateTime, /* @ts-ignore */
|
|
26812
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
26401
26813
|
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
26402
26814
|
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
26403
26815
|
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -26439,7 +26851,7 @@ class DateTimeInputComponent {
|
|
|
26439
26851
|
this.activePane.set(next);
|
|
26440
26852
|
}
|
|
26441
26853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26442
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"Choose a date and time\">\n <div class=\"et-date-time-input-panel\">\n <div class=\"et-date-time-input-panel-tabs\">\n <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\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]=\"activePane()\"\n [attr.data-nav]=\"paneNav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimeInputPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.dateTime()\"\n [min]=\"dateTimeInput.minDate()\"\n [max]=\"dateTimeInput.maxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"dateTimeInput.selectDate($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.dateTime()\"\n [format]=\"dateTimeInput.displayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-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[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-time-picker-column-size: 300px}.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: DateTimeInputPanesDirective, selector: "[etDateTimeInputPanes]" }, { 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 }); }
|
|
26854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\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]=\"activePane()\"\n [attr.data-nav]=\"paneNav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.dateTime()\"\n [min]=\"dateTimeInput.minDate()\"\n [max]=\"dateTimeInput.maxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"dateTimeInput.selectDate($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.dateTime()\"\n [format]=\"dateTimeInput.displayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-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[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-time-picker-column-size: 300px}.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 }); }
|
|
26443
26855
|
}
|
|
26444
26856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeInputComponent, decorators: [{
|
|
26445
26857
|
type: Component,
|
|
@@ -26451,7 +26863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
26451
26863
|
DatePickerSurfaceDirective,
|
|
26452
26864
|
DatePickerTriggerDirective,
|
|
26453
26865
|
DatePickerPanelComponent,
|
|
26454
|
-
|
|
26866
|
+
DateTimePickerPanesDirective,
|
|
26455
26867
|
SegmentedButtonGroupComponent,
|
|
26456
26868
|
SegmentedButtonComponent,
|
|
26457
26869
|
IconDirective,
|
|
@@ -26492,8 +26904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
26492
26904
|
},
|
|
26493
26905
|
], host: {
|
|
26494
26906
|
class: 'et-date-time-input',
|
|
26495
|
-
}, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
26496
|
-
}], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }] } });
|
|
26907
|
+
}, template: "<input\n [etInputMask]=\"dateTimeInput.maskPattern()\"\n class=\"et-date-time-input-field\"\n etDateTimeInputField\n maskValueMode=\"masked\"\n placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\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]=\"activePane()\"\n [attr.data-nav]=\"paneNav()\"\n class=\"et-date-time-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [value]=\"dateTimeInput.dateTime()\"\n [min]=\"dateTimeInput.minDate()\"\n [max]=\"dateTimeInput.maxDate()\"\n [dateFilter]=\"dateTimeInput.dateFilter()\"\n [startAt]=\"dateTimeInput.startAt()\"\n [startView]=\"dateTimeInput.startView()\"\n [dateClass]=\"dateTimeInput.dateClass()\"\n [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n (valueChange)=\"dateTimeInput.selectDate($event)\"\n />\n <div class=\"et-date-time-input-panel-time-pane\">\n <et-time-picker\n [value]=\"dateTimeInput.dateTime()\"\n [format]=\"dateTimeInput.displayFormat()\"\n [locale]=\"dateTimeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-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[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-time-picker-column-size: 300px}.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"] }]
|
|
26908
|
+
}], 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }] } });
|
|
26497
26909
|
|
|
26498
26910
|
const DATE_TIME_INPUT_IMPORTS = [
|
|
26499
26911
|
DateTimeInputComponent,
|
|
@@ -26503,6 +26915,307 @@ const DATE_TIME_INPUT_IMPORTS = [
|
|
|
26503
26915
|
DatePickerSurfaceDirective,
|
|
26504
26916
|
];
|
|
26505
26917
|
|
|
26918
|
+
// codes 3060-3069 (inside the shared date & time inputs block 3000-3099)
|
|
26919
|
+
const DATE_TIME_RANGE_INPUT_ERROR_CODES = {
|
|
26920
|
+
FIELD_OUTSIDE_DATE_TIME_RANGE_INPUT: 3060,
|
|
26921
|
+
};
|
|
26922
|
+
|
|
26923
|
+
/**
|
|
26924
|
+
* A combined date & time *range* form control: one registered field-control containing two text
|
|
26925
|
+
* inputs that share a single picker holding a range-mode calendar and one time picker per side. The
|
|
26926
|
+
* value is `{ start, end }` of `valueFormat` wire strings, both carrying a time; each side parses
|
|
26927
|
+
* strictly against the combined `displayFormat` on blur/Enter, then leniently, exactly like the
|
|
26928
|
+
* single date-time input.
|
|
26929
|
+
*
|
|
26930
|
+
* The picker never closes on its own - a completed day range is only half the range, so the reader
|
|
26931
|
+
* still has both times to set.
|
|
26932
|
+
*/
|
|
26933
|
+
class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
|
|
26934
|
+
constructor() {
|
|
26935
|
+
super(...arguments);
|
|
26936
|
+
this.dateTimeLabels = injectDateTimeLabels();
|
|
26937
|
+
this.defaultValueFormat = injectDateFormat();
|
|
26938
|
+
/** Message the form field shows when either side's typed text can't be parsed as a date & time. */
|
|
26939
|
+
this.parseErrorMessage = input(null, /* @ts-ignore */
|
|
26940
|
+
...(ngDevMode ? [{ debugName: "parseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
26941
|
+
/** Combined date-fns format shown in (and parsed from) both fields. Locale-aware by default. */
|
|
26942
|
+
this.displayFormat = input('Pp', /* @ts-ignore */
|
|
26943
|
+
...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
|
|
26944
|
+
/** Forwarded to the picker calendar. (`min`/`max` are reserved by signal forms.) */
|
|
26945
|
+
this.minDate = input(null, /* @ts-ignore */
|
|
26946
|
+
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
26947
|
+
this.maxDate = input(null, /* @ts-ignore */
|
|
26948
|
+
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
26949
|
+
this.dateFilter = input(null, /* @ts-ignore */
|
|
26950
|
+
...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
|
|
26951
|
+
/** Month the picker calendar opens at while the range is empty. */
|
|
26952
|
+
this.startAt = input(null, /* @ts-ignore */
|
|
26953
|
+
...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
26954
|
+
/** Which grid the picker calendar opens on - `'year'` to pick a month first, `'multiYear'` a year. */
|
|
26955
|
+
this.startView = input('month', /* @ts-ignore */
|
|
26956
|
+
...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
|
|
26957
|
+
/** Per-cell classes for the picker calendar - busy days, holidays, markers of your own. */
|
|
26958
|
+
this.dateClass = input(null, /* @ts-ignore */
|
|
26959
|
+
...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
|
|
26960
|
+
/** Renders the picker calendar's week-number column. */
|
|
26961
|
+
this.weekNumbers = input(false, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
26962
|
+
/**
|
|
26963
|
+
* Forwarded to both of the picker's time pickers. Only the time of day of `minTime`/`maxTime` is
|
|
26964
|
+
* read, so the bound applies on every day; `timeFilter` receives the full candidate timestamp and
|
|
26965
|
+
* the side it belongs to. Bounds shape the picker - validate typed entry with a schema validator,
|
|
26966
|
+
* exactly like `minDate`/`maxDate`.
|
|
26967
|
+
*/
|
|
26968
|
+
this.minTime = input(null, /* @ts-ignore */
|
|
26969
|
+
...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
|
|
26970
|
+
this.maxTime = input(null, /* @ts-ignore */
|
|
26971
|
+
...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
|
|
26972
|
+
this.timeFilter = input(null, /* @ts-ignore */
|
|
26973
|
+
...(ngDevMode ? [{ debugName: "timeFilter" }] : /* istanbul ignore next */ []));
|
|
26974
|
+
/** No precision to derive from here - both ends carry a time. */
|
|
26975
|
+
this.effectiveDisplayFormat = this.displayFormat;
|
|
26976
|
+
/** The string in effect: this instance's `parseErrorMessage`, else the domain's label set. */
|
|
26977
|
+
this.resolvedParseErrorMessage = computed(() => this.parseErrorMessage() ?? this.dateTimeLabels().invalidDateTimeRange, /* @ts-ignore */
|
|
26978
|
+
...(ngDevMode ? [{ debugName: "resolvedParseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
26979
|
+
this.controlType = signal(FORM_FIELD_CONTROL_TYPES.DATE_TIME_RANGE_INPUT, /* @ts-ignore */
|
|
26980
|
+
...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
26981
|
+
}
|
|
26982
|
+
/**
|
|
26983
|
+
* Commits a picker day range, keeping each side's committed time of day (midnight while there is
|
|
26984
|
+
* none yet). The picker stays open - the times are still to come.
|
|
26985
|
+
*/
|
|
26986
|
+
selectCalendarRange(range) {
|
|
26987
|
+
if (!this.interactive()) {
|
|
26988
|
+
return;
|
|
26989
|
+
}
|
|
26990
|
+
// both merges read the value the range is about to replace, so they run before `writeRange`
|
|
26991
|
+
this.writeRange({ start: this.mergeDay(range.start, 'start'), end: this.mergeDay(range.end, 'end') });
|
|
26992
|
+
this.touched.set(true);
|
|
26993
|
+
}
|
|
26994
|
+
/**
|
|
26995
|
+
* Commits a picker-selected time onto one side's committed day. While that side has no day yet the
|
|
26996
|
+
* *other* side's day is used - setting the end time of an appointment whose start day is known
|
|
26997
|
+
* means that day, not today - and today only when the range is still empty.
|
|
26998
|
+
*/
|
|
26999
|
+
selectTime(side, time) {
|
|
27000
|
+
if (time === null || !this.interactive()) {
|
|
27001
|
+
return;
|
|
27002
|
+
}
|
|
27003
|
+
const day = this.sideDate(side) ?? this.sideDate(side === 'start' ? 'end' : 'start') ?? time;
|
|
27004
|
+
this.commitSideDate(side, withTimeOfDay(day, time));
|
|
27005
|
+
this.touched.set(true);
|
|
27006
|
+
}
|
|
27007
|
+
parseSideCommit(raw) {
|
|
27008
|
+
return parseDateTimeText(raw, {
|
|
27009
|
+
format: this.effectiveDisplayFormat(),
|
|
27010
|
+
locale: this.effectiveLocale(),
|
|
27011
|
+
referenceDate: startOfDay(new Date()),
|
|
27012
|
+
});
|
|
27013
|
+
}
|
|
27014
|
+
mergeDay(day, side) {
|
|
27015
|
+
if (day === null) {
|
|
27016
|
+
return null;
|
|
27017
|
+
}
|
|
27018
|
+
const committed = this.sideDate(side);
|
|
27019
|
+
return committed === null ? startOfDay(day) : withTimeOfDay(day, committed);
|
|
27020
|
+
}
|
|
27021
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
27022
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DateTimeRangeInputDirective, isStandalone: true, selector: "[etDateTimeRangeInput]", inputs: { parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DATE_PICKER_HOST, useExisting: DateTimeRangeInputDirective }], exportAs: ["etDateTimeRangeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
27023
|
+
}
|
|
27024
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputDirective, decorators: [{
|
|
27025
|
+
type: Directive,
|
|
27026
|
+
args: [{
|
|
27027
|
+
selector: '[etDateTimeRangeInput]',
|
|
27028
|
+
exportAs: 'etDateTimeRangeInput',
|
|
27029
|
+
providers: [{ provide: DATE_PICKER_HOST, useExisting: DateTimeRangeInputDirective }],
|
|
27030
|
+
}]
|
|
27031
|
+
}], propDecorators: { parseErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseErrorMessage", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }] } });
|
|
27032
|
+
|
|
27033
|
+
/**
|
|
27034
|
+
* One side of a date & time range input: shows the committed side value in the combined display
|
|
27035
|
+
* format, commits typed text (strict-then-lenient) on blur/Enter, keeps unparseable text visible,
|
|
27036
|
+
* and opens the picker on Alt+ArrowDown. Hosts the range input's opt-in typing mask
|
|
27037
|
+
* (`INPUT_MASK_HOST`) - each side is its own mask host.
|
|
27038
|
+
*/
|
|
27039
|
+
class DateTimeRangeInputFieldDirective extends DateRangePickerInputFieldDirective {
|
|
27040
|
+
constructor() {
|
|
27041
|
+
super();
|
|
27042
|
+
// eslint-disable-next-line ethlete/inject-member-accessibility -- referenced from the base class's host bindings
|
|
27043
|
+
this.rangeInput = inject(DateTimeRangeInputDirective, { optional: true });
|
|
27044
|
+
if (ngDevMode) {
|
|
27045
|
+
afterNextRender(() => {
|
|
27046
|
+
if (!this.rangeInput) {
|
|
27047
|
+
throw new RuntimeError(DATE_TIME_RANGE_INPUT_ERROR_CODES.FIELD_OUTSIDE_DATE_TIME_RANGE_INPUT, '[DateTimeRangeInputFieldDirective] etDateTimeRangeInputField must be placed inside an [etDateTimeRangeInput] element.', { element: this.elementRef.nativeElement });
|
|
27048
|
+
}
|
|
27049
|
+
});
|
|
27050
|
+
}
|
|
27051
|
+
}
|
|
27052
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
27053
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DateTimeRangeInputFieldDirective, isStandalone: true, selector: "input[etDateTimeRangeInputField]", providers: [{ provide: INPUT_MASK_HOST, useExisting: DateTimeRangeInputFieldDirective }], exportAs: ["etDateTimeRangeInputField"], usesInheritance: true, ngImport: i0 }); }
|
|
27054
|
+
}
|
|
27055
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputFieldDirective, decorators: [{
|
|
27056
|
+
type: Directive,
|
|
27057
|
+
args: [{
|
|
27058
|
+
selector: 'input[etDateTimeRangeInputField]',
|
|
27059
|
+
exportAs: 'etDateTimeRangeInputField',
|
|
27060
|
+
providers: [{ provide: INPUT_MASK_HOST, useExisting: DateTimeRangeInputFieldDirective }],
|
|
27061
|
+
}]
|
|
27062
|
+
}], ctorParameters: () => [] });
|
|
27063
|
+
|
|
27064
|
+
const PANE_ORDER = ['dates', 'times'];
|
|
27065
|
+
class DateTimeRangeInputComponent {
|
|
27066
|
+
constructor() {
|
|
27067
|
+
this.dateTimeLabels = injectDateTimeLabels();
|
|
27068
|
+
this.formFieldLabels = injectFormFieldLabels();
|
|
27069
|
+
this.rangeInput = inject(DateTimeRangeInputDirective);
|
|
27070
|
+
this.startAriaLabel = input(null, /* @ts-ignore */
|
|
27071
|
+
...(ngDevMode ? [{ debugName: "startAriaLabel" }] : /* istanbul ignore next */ []));
|
|
27072
|
+
this.endAriaLabel = input(null, /* @ts-ignore */
|
|
27073
|
+
...(ngDevMode ? [{ debugName: "endAriaLabel" }] : /* istanbul ignore next */ []));
|
|
27074
|
+
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
27075
|
+
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
27076
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
27077
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
27078
|
+
this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27079
|
+
this.secondStep = input(1, { ...(ngDevMode ? { debugName: "secondStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27080
|
+
/** The bottom sheet's two tab labels. */
|
|
27081
|
+
this.datesTabLabel = input(null, /* @ts-ignore */
|
|
27082
|
+
...(ngDevMode ? [{ debugName: "datesTabLabel" }] : /* istanbul ignore next */ []));
|
|
27083
|
+
this.timesTabLabel = input(null, /* @ts-ignore */
|
|
27084
|
+
...(ngDevMode ? [{ debugName: "timesTabLabel" }] : /* istanbul ignore next */ []));
|
|
27085
|
+
/** The time picker's two ends, on the control that switches between them. */
|
|
27086
|
+
this.startTimeLabel = input(null, /* @ts-ignore */
|
|
27087
|
+
...(ngDevMode ? [{ debugName: "startTimeLabel" }] : /* istanbul ignore next */ []));
|
|
27088
|
+
this.endTimeLabel = input(null, /* @ts-ignore */
|
|
27089
|
+
...(ngDevMode ? [{ debugName: "endTimeLabel" }] : /* istanbul ignore next */ []));
|
|
27090
|
+
/** Shows a clear (×) control while a value or pending text is set and the field is in use. */
|
|
27091
|
+
this.clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
27092
|
+
this.clearLabel = input(null, /* @ts-ignore */
|
|
27093
|
+
...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
|
|
27094
|
+
/** The string in effect: this instance's `startAriaLabel`, else the domain's label set. */
|
|
27095
|
+
this.resolvedStartAriaLabel = computed(() => this.startAriaLabel() ?? this.dateTimeLabels().startDateTime, /* @ts-ignore */
|
|
27096
|
+
...(ngDevMode ? [{ debugName: "resolvedStartAriaLabel" }] : /* istanbul ignore next */ []));
|
|
27097
|
+
/** The string in effect: this instance's `endAriaLabel`, else the domain's label set. */
|
|
27098
|
+
this.resolvedEndAriaLabel = computed(() => this.endAriaLabel() ?? this.dateTimeLabels().endDateTime, /* @ts-ignore */
|
|
27099
|
+
...(ngDevMode ? [{ debugName: "resolvedEndAriaLabel" }] : /* istanbul ignore next */ []));
|
|
27100
|
+
/** The string in effect: this instance's `pickerTriggerLabel`, else the domain's label set. */
|
|
27101
|
+
this.resolvedPickerTriggerLabel = computed(() => this.pickerTriggerLabel() ?? this.dateTimeLabels().openDateTimePicker, /* @ts-ignore */
|
|
27102
|
+
...(ngDevMode ? [{ debugName: "resolvedPickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
27103
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
27104
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseDateTimeRange, /* @ts-ignore */
|
|
27105
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
27106
|
+
/** The strings in effect: this instance's tab labels, else the domain's label set. */
|
|
27107
|
+
this.resolvedDatesTabLabel = computed(() => this.datesTabLabel() ?? this.dateTimeLabels().datesTab, /* @ts-ignore */
|
|
27108
|
+
...(ngDevMode ? [{ debugName: "resolvedDatesTabLabel" }] : /* istanbul ignore next */ []));
|
|
27109
|
+
this.resolvedTimesTabLabel = computed(() => this.timesTabLabel() ?? this.dateTimeLabels().timesTab, /* @ts-ignore */
|
|
27110
|
+
...(ngDevMode ? [{ debugName: "resolvedTimesTabLabel" }] : /* istanbul ignore next */ []));
|
|
27111
|
+
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
27112
|
+
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
27113
|
+
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
27114
|
+
// only while the field is in use - mirrors the date-time input's clear affordance
|
|
27115
|
+
this.showClear = computed(() => this.clearable() &&
|
|
27116
|
+
this.rangeInput.hasValue() &&
|
|
27117
|
+
(this.rangeInput.focused() || this.rangeInput.pickerOpen()) &&
|
|
27118
|
+
this.rangeInput.interactive(), /* @ts-ignore */
|
|
27119
|
+
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
27120
|
+
this.activePane = signal('dates', /* @ts-ignore */
|
|
27121
|
+
...(ngDevMode ? [{ debugName: "activePane" }] : /* istanbul ignore next */ []));
|
|
27122
|
+
/**
|
|
27123
|
+
* Direction of the last pane switch - the incoming pane slides in from the
|
|
27124
|
+
* travel direction, like the calendar's month navigation. `null` while
|
|
27125
|
+
* untouched, so opening the picker does not animate.
|
|
27126
|
+
*/
|
|
27127
|
+
this.paneNav = signal(null, /* @ts-ignore */
|
|
27128
|
+
...(ngDevMode ? [{ debugName: "paneNav" }] : /* istanbul ignore next */ []));
|
|
27129
|
+
// every picker open starts back on the calendar pane, without a slide
|
|
27130
|
+
effect(() => {
|
|
27131
|
+
if (this.rangeInput.pickerOpen()) {
|
|
27132
|
+
this.activePane.set('dates');
|
|
27133
|
+
this.paneNav.set(null);
|
|
27134
|
+
}
|
|
27135
|
+
});
|
|
27136
|
+
}
|
|
27137
|
+
handleClearClick(event) {
|
|
27138
|
+
// clearing must not bubble into the form field's frame-click handling
|
|
27139
|
+
event.stopPropagation();
|
|
27140
|
+
this.rangeInput.clearRange();
|
|
27141
|
+
}
|
|
27142
|
+
setActivePane(pane) {
|
|
27143
|
+
const next = PANE_ORDER.find((candidate) => candidate === pane) ?? 'dates';
|
|
27144
|
+
const current = this.activePane();
|
|
27145
|
+
if (next === current) {
|
|
27146
|
+
return;
|
|
27147
|
+
}
|
|
27148
|
+
this.paneNav.set(PANE_ORDER.indexOf(next) > PANE_ORDER.indexOf(current) ? 'forward' : 'backward');
|
|
27149
|
+
this.activePane.set(next);
|
|
27150
|
+
}
|
|
27151
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27152
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-time-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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-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", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\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]=\"activePane()\"\n [attr.data-nav]=\"paneNav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.calendarRange()\"\n [min]=\"rangeInput.minDate()\"\n [max]=\"rangeInput.maxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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 mode=\"range\"\n />\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-time-range-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-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-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.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: "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 }); }
|
|
27153
|
+
}
|
|
27154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputComponent, decorators: [{
|
|
27155
|
+
type: Component,
|
|
27156
|
+
args: [{ selector: 'et-date-time-range-input', encapsulation: ViewEncapsulation.None, imports: [
|
|
27157
|
+
ControlSuffixDirective,
|
|
27158
|
+
...CALENDAR_IMPORTS,
|
|
27159
|
+
...TIME_PICKER_IMPORTS,
|
|
27160
|
+
DateTimeRangeInputFieldDirective,
|
|
27161
|
+
DatePickerSurfaceDirective,
|
|
27162
|
+
DatePickerTriggerDirective,
|
|
27163
|
+
DatePickerPanelComponent,
|
|
27164
|
+
DateTimePickerPanesDirective,
|
|
27165
|
+
SegmentedButtonGroupComponent,
|
|
27166
|
+
SegmentedButtonComponent,
|
|
27167
|
+
IconDirective,
|
|
27168
|
+
InputMaskDirective,
|
|
27169
|
+
], providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [
|
|
27170
|
+
{
|
|
27171
|
+
directive: DateTimeRangeInputDirective,
|
|
27172
|
+
inputs: [
|
|
27173
|
+
'value',
|
|
27174
|
+
'mixed',
|
|
27175
|
+
'mixedLabel',
|
|
27176
|
+
'touched',
|
|
27177
|
+
'disabled',
|
|
27178
|
+
'readonly',
|
|
27179
|
+
'invalid',
|
|
27180
|
+
'errors',
|
|
27181
|
+
'required',
|
|
27182
|
+
'name',
|
|
27183
|
+
'startPlaceholder',
|
|
27184
|
+
'endPlaceholder',
|
|
27185
|
+
'parseErrorMessage',
|
|
27186
|
+
'valueFormat',
|
|
27187
|
+
'displayFormat',
|
|
27188
|
+
'locale',
|
|
27189
|
+
'mask',
|
|
27190
|
+
'minDate',
|
|
27191
|
+
'maxDate',
|
|
27192
|
+
'dateFilter',
|
|
27193
|
+
'startAt',
|
|
27194
|
+
'startView',
|
|
27195
|
+
'dateClass',
|
|
27196
|
+
'weekNumbers',
|
|
27197
|
+
'minTime',
|
|
27198
|
+
'maxTime',
|
|
27199
|
+
'timeFilter',
|
|
27200
|
+
'pickerOpen',
|
|
27201
|
+
],
|
|
27202
|
+
outputs: ['valueChange', 'mixedChange', 'touchedChange', 'pickerOpenChange'],
|
|
27203
|
+
},
|
|
27204
|
+
], host: {
|
|
27205
|
+
class: 'et-date-time-range-input',
|
|
27206
|
+
role: 'group',
|
|
27207
|
+
'[attr.aria-labelledby]': 'rangeInput.labelId()',
|
|
27208
|
+
}, 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<ng-template etControlSuffix>\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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-range-input-panel\">\n <div class=\"et-date-time-range-input-panel-tabs\">\n <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\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]=\"activePane()\"\n [attr.data-nav]=\"paneNav()\"\n class=\"et-date-time-range-input-panel-panes\"\n etDateTimePickerPanes\n >\n <et-calendar\n [rangeValue]=\"rangeInput.calendarRange()\"\n [min]=\"rangeInput.minDate()\"\n [max]=\"rangeInput.maxDate()\"\n [dateFilter]=\"rangeInput.dateFilter()\"\n [startAt]=\"rangeInput.startAt()\"\n [startView]=\"rangeInput.startView()\"\n [dateClass]=\"rangeInput.dateClass()\"\n [weekNumbers]=\"rangeInput.weekNumbers()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n mode=\"range\"\n />\n\n <et-time-picker\n [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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 mode=\"range\"\n />\n </div>\n </div>\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-time-range-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-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-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.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"] }]
|
|
27209
|
+
}], ctorParameters: () => [], propDecorators: { startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }] } });
|
|
27210
|
+
|
|
27211
|
+
const DATE_TIME_RANGE_INPUT_IMPORTS = [
|
|
27212
|
+
DateTimeRangeInputComponent,
|
|
27213
|
+
DateTimeRangeInputDirective,
|
|
27214
|
+
DateTimeRangeInputFieldDirective,
|
|
27215
|
+
DatePickerTriggerDirective,
|
|
27216
|
+
DatePickerSurfaceDirective,
|
|
27217
|
+
];
|
|
27218
|
+
|
|
26506
27219
|
// codes 3050-3059 (inside the shared date & time inputs block 3000-3099)
|
|
26507
27220
|
const DURATION_INPUT_ERROR_CODES = {
|
|
26508
27221
|
FIELD_OUTSIDE_DURATION_INPUT: 3050,
|
|
@@ -27095,6 +27808,8 @@ class TimeInputComponent {
|
|
|
27095
27808
|
this.timeInput = inject(TimeInputDirective);
|
|
27096
27809
|
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
27097
27810
|
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
27811
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
27812
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
27098
27813
|
this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27099
27814
|
this.secondStep = input(1, { ...(ngDevMode ? { debugName: "secondStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27100
27815
|
/** Shows a clear (×) control while a value or pending text is set and the field is in use. */
|
|
@@ -27104,6 +27819,9 @@ class TimeInputComponent {
|
|
|
27104
27819
|
/** The string in effect: this instance's `pickerTriggerLabel`, else the domain's label set. */
|
|
27105
27820
|
this.resolvedPickerTriggerLabel = computed(() => this.pickerTriggerLabel() ?? this.dateTimeLabels().openTimePicker, /* @ts-ignore */
|
|
27106
27821
|
...(ngDevMode ? [{ debugName: "resolvedPickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
27822
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
27823
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseTime, /* @ts-ignore */
|
|
27824
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
27107
27825
|
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
27108
27826
|
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
27109
27827
|
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -27120,7 +27838,7 @@ class TimeInputComponent {
|
|
|
27120
27838
|
this.timeInput.clearValue();
|
|
27121
27839
|
}
|
|
27122
27840
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
27841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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.displayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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 }); }
|
|
27124
27842
|
}
|
|
27125
27843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeInputComponent, decorators: [{
|
|
27126
27844
|
type: Component,
|
|
@@ -27162,8 +27880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
27162
27880
|
},
|
|
27163
27881
|
], host: {
|
|
27164
27882
|
class: 'et-time-input',
|
|
27165
|
-
}, 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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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=\"
|
|
27166
|
-
}], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
27883
|
+
}, 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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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.displayFormat()\"\n [locale]=\"timeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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"] }]
|
|
27884
|
+
}], 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
27167
27885
|
|
|
27168
27886
|
const TIME_INPUT_IMPORTS = [
|
|
27169
27887
|
TimeInputComponent,
|
|
@@ -27173,6 +27891,219 @@ const TIME_INPUT_IMPORTS = [
|
|
|
27173
27891
|
DatePickerSurfaceDirective,
|
|
27174
27892
|
];
|
|
27175
27893
|
|
|
27894
|
+
// codes 3070-3079 (inside the shared date & time inputs block 3000-3099)
|
|
27895
|
+
const TIME_RANGE_INPUT_ERROR_CODES = {
|
|
27896
|
+
FIELD_OUTSIDE_TIME_RANGE_INPUT: 3070,
|
|
27897
|
+
};
|
|
27898
|
+
|
|
27899
|
+
/**
|
|
27900
|
+
* A time *range* form control: one registered field-control containing two text inputs that share a
|
|
27901
|
+
* single range-mode time picker. The value is `{ start, end }` of `valueFormat` wire strings (`HH:mm`
|
|
27902
|
+
* by default); each side parses leniently on blur/Enter (`930` → 09:30), exactly like the single time
|
|
27903
|
+
* input.
|
|
27904
|
+
*
|
|
27905
|
+
* The picker never closes on its own - filling one end still leaves the other to set.
|
|
27906
|
+
*/
|
|
27907
|
+
class TimeRangeInputDirective extends DateRangePickerInputDirective {
|
|
27908
|
+
constructor() {
|
|
27909
|
+
super(...arguments);
|
|
27910
|
+
this.dateTimeLabels = injectDateTimeLabels();
|
|
27911
|
+
this.defaultValueFormat = injectTimeFormat();
|
|
27912
|
+
/** Message the form field shows when either side's typed text can't be parsed as a time. */
|
|
27913
|
+
this.parseErrorMessage = input(null, /* @ts-ignore */
|
|
27914
|
+
...(ngDevMode ? [{ debugName: "parseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
27915
|
+
/** date-fns format shown in (and parsed from) both fields. Locale-aware by default. */
|
|
27916
|
+
this.displayFormat = input('p', /* @ts-ignore */
|
|
27917
|
+
...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
|
|
27918
|
+
/**
|
|
27919
|
+
* Forwarded to the picker's time picker. (`min`/`max` are reserved by signal forms.) Only the time
|
|
27920
|
+
* of day of `minTime`/`maxTime` is read; `timeFilter` receives the candidate together with the side
|
|
27921
|
+
* it belongs to. Bounds shape the picker - validate typed entry with a schema validator, exactly
|
|
27922
|
+
* like the date inputs' `minDate`/`maxDate`.
|
|
27923
|
+
*/
|
|
27924
|
+
this.minTime = input(null, /* @ts-ignore */
|
|
27925
|
+
...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
|
|
27926
|
+
this.maxTime = input(null, /* @ts-ignore */
|
|
27927
|
+
...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
|
|
27928
|
+
this.timeFilter = input(null, /* @ts-ignore */
|
|
27929
|
+
...(ngDevMode ? [{ debugName: "timeFilter" }] : /* istanbul ignore next */ []));
|
|
27930
|
+
/** No precision to derive from here - the input is the format in effect. */
|
|
27931
|
+
this.effectiveDisplayFormat = this.displayFormat;
|
|
27932
|
+
/** The string in effect: this instance's `parseErrorMessage`, else the domain's label set. */
|
|
27933
|
+
this.resolvedParseErrorMessage = computed(() => this.parseErrorMessage() ?? this.dateTimeLabels().invalidTimeRange, /* @ts-ignore */
|
|
27934
|
+
...(ngDevMode ? [{ debugName: "resolvedParseErrorMessage" }] : /* istanbul ignore next */ []));
|
|
27935
|
+
this.controlType = signal(FORM_FIELD_CONTROL_TYPES.TIME_RANGE_INPUT, /* @ts-ignore */
|
|
27936
|
+
...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
27937
|
+
// parses fill the missing date (and unentered seconds) from here instead of "now", so both ends
|
|
27938
|
+
// land on the same day and a consumer `timeFilter` can compare them
|
|
27939
|
+
this.referenceDate = startOfDay(new Date());
|
|
27940
|
+
}
|
|
27941
|
+
/** Commits a picker-selected time onto one end. The picker stays open - the other end may follow. */
|
|
27942
|
+
selectTime(side, time) {
|
|
27943
|
+
if (time === null || !this.interactive()) {
|
|
27944
|
+
return;
|
|
27945
|
+
}
|
|
27946
|
+
this.commitSideDate(side, time);
|
|
27947
|
+
this.touched.set(true);
|
|
27948
|
+
}
|
|
27949
|
+
parseSideCommit(raw) {
|
|
27950
|
+
return parseTimeText(raw, {
|
|
27951
|
+
format: this.effectiveDisplayFormat(),
|
|
27952
|
+
locale: this.effectiveLocale(),
|
|
27953
|
+
referenceDate: this.referenceDate,
|
|
27954
|
+
});
|
|
27955
|
+
}
|
|
27956
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
27957
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TimeRangeInputDirective, isStandalone: true, selector: "[etTimeRangeInput]", inputs: { parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DATE_PICKER_HOST, useExisting: TimeRangeInputDirective }], exportAs: ["etTimeRangeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
27958
|
+
}
|
|
27959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputDirective, decorators: [{
|
|
27960
|
+
type: Directive,
|
|
27961
|
+
args: [{
|
|
27962
|
+
selector: '[etTimeRangeInput]',
|
|
27963
|
+
exportAs: 'etTimeRangeInput',
|
|
27964
|
+
providers: [{ provide: DATE_PICKER_HOST, useExisting: TimeRangeInputDirective }],
|
|
27965
|
+
}]
|
|
27966
|
+
}], propDecorators: { parseErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseErrorMessage", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }] } });
|
|
27967
|
+
|
|
27968
|
+
/**
|
|
27969
|
+
* One side of a time range input: shows the committed side value in the display format, commits typed
|
|
27970
|
+
* text (strict-then-lenient) on blur/Enter, keeps unparseable text visible, and opens the picker on
|
|
27971
|
+
* Alt+ArrowDown. Hosts the range input's opt-in typing mask (`INPUT_MASK_HOST`) - each side is its own
|
|
27972
|
+
* mask host.
|
|
27973
|
+
*/
|
|
27974
|
+
class TimeRangeInputFieldDirective extends DateRangePickerInputFieldDirective {
|
|
27975
|
+
constructor() {
|
|
27976
|
+
super();
|
|
27977
|
+
// eslint-disable-next-line ethlete/inject-member-accessibility -- referenced from the base class's host bindings
|
|
27978
|
+
this.rangeInput = inject(TimeRangeInputDirective, { optional: true });
|
|
27979
|
+
if (ngDevMode) {
|
|
27980
|
+
afterNextRender(() => {
|
|
27981
|
+
if (!this.rangeInput) {
|
|
27982
|
+
throw new RuntimeError(TIME_RANGE_INPUT_ERROR_CODES.FIELD_OUTSIDE_TIME_RANGE_INPUT, '[TimeRangeInputFieldDirective] etTimeRangeInputField must be placed inside an [etTimeRangeInput] element.', { element: this.elementRef.nativeElement });
|
|
27983
|
+
}
|
|
27984
|
+
});
|
|
27985
|
+
}
|
|
27986
|
+
}
|
|
27987
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
27988
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TimeRangeInputFieldDirective, isStandalone: true, selector: "input[etTimeRangeInputField]", providers: [{ provide: INPUT_MASK_HOST, useExisting: TimeRangeInputFieldDirective }], exportAs: ["etTimeRangeInputField"], usesInheritance: true, ngImport: i0 }); }
|
|
27989
|
+
}
|
|
27990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputFieldDirective, decorators: [{
|
|
27991
|
+
type: Directive,
|
|
27992
|
+
args: [{
|
|
27993
|
+
selector: 'input[etTimeRangeInputField]',
|
|
27994
|
+
exportAs: 'etTimeRangeInputField',
|
|
27995
|
+
providers: [{ provide: INPUT_MASK_HOST, useExisting: TimeRangeInputFieldDirective }],
|
|
27996
|
+
}]
|
|
27997
|
+
}], ctorParameters: () => [] });
|
|
27998
|
+
|
|
27999
|
+
class TimeRangeInputComponent {
|
|
28000
|
+
constructor() {
|
|
28001
|
+
this.dateTimeLabels = injectDateTimeLabels();
|
|
28002
|
+
this.formFieldLabels = injectFormFieldLabels();
|
|
28003
|
+
this.rangeInput = inject(TimeRangeInputDirective);
|
|
28004
|
+
this.startAriaLabel = input(null, /* @ts-ignore */
|
|
28005
|
+
...(ngDevMode ? [{ debugName: "startAriaLabel" }] : /* istanbul ignore next */ []));
|
|
28006
|
+
this.endAriaLabel = input(null, /* @ts-ignore */
|
|
28007
|
+
...(ngDevMode ? [{ debugName: "endAriaLabel" }] : /* istanbul ignore next */ []));
|
|
28008
|
+
this.pickerTriggerLabel = input(null, /* @ts-ignore */
|
|
28009
|
+
...(ngDevMode ? [{ debugName: "pickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
28010
|
+
this.dialogLabel = input(null, /* @ts-ignore */
|
|
28011
|
+
...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
|
|
28012
|
+
this.minuteStep = input(5, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
28013
|
+
this.secondStep = input(1, { ...(ngDevMode ? { debugName: "secondStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
28014
|
+
/** The time picker's two ends, on the control that switches between them. */
|
|
28015
|
+
this.startTimeLabel = input(null, /* @ts-ignore */
|
|
28016
|
+
...(ngDevMode ? [{ debugName: "startTimeLabel" }] : /* istanbul ignore next */ []));
|
|
28017
|
+
this.endTimeLabel = input(null, /* @ts-ignore */
|
|
28018
|
+
...(ngDevMode ? [{ debugName: "endTimeLabel" }] : /* istanbul ignore next */ []));
|
|
28019
|
+
/** Shows a clear (×) control while a value or pending text is set and the field is in use. */
|
|
28020
|
+
this.clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
28021
|
+
this.clearLabel = input(null, /* @ts-ignore */
|
|
28022
|
+
...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
|
|
28023
|
+
/** The string in effect: this instance's `startAriaLabel`, else the domain's label set. */
|
|
28024
|
+
this.resolvedStartAriaLabel = computed(() => this.startAriaLabel() ?? this.dateTimeLabels().startTime, /* @ts-ignore */
|
|
28025
|
+
...(ngDevMode ? [{ debugName: "resolvedStartAriaLabel" }] : /* istanbul ignore next */ []));
|
|
28026
|
+
/** The string in effect: this instance's `endAriaLabel`, else the domain's label set. */
|
|
28027
|
+
this.resolvedEndAriaLabel = computed(() => this.endAriaLabel() ?? this.dateTimeLabels().endTime, /* @ts-ignore */
|
|
28028
|
+
...(ngDevMode ? [{ debugName: "resolvedEndAriaLabel" }] : /* istanbul ignore next */ []));
|
|
28029
|
+
/** The string in effect: this instance's `pickerTriggerLabel`, else the domain's label set. */
|
|
28030
|
+
this.resolvedPickerTriggerLabel = computed(() => this.pickerTriggerLabel() ?? this.dateTimeLabels().openTimePicker, /* @ts-ignore */
|
|
28031
|
+
...(ngDevMode ? [{ debugName: "resolvedPickerTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
28032
|
+
/** The string in effect: this instance's `dialogLabel`, else the domain's label set. */
|
|
28033
|
+
this.resolvedDialogLabel = computed(() => this.dialogLabel() ?? this.dateTimeLabels().chooseTimeRange, /* @ts-ignore */
|
|
28034
|
+
...(ngDevMode ? [{ debugName: "resolvedDialogLabel" }] : /* istanbul ignore next */ []));
|
|
28035
|
+
/** The string in effect: this instance's `clearLabel`, else `FORM_FIELD_LABELS`. */
|
|
28036
|
+
this.resolvedClearLabel = computed(() => this.clearLabel() ?? this.formFieldLabels().clear, /* @ts-ignore */
|
|
28037
|
+
...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
|
|
28038
|
+
// only while the field is in use - mirrors the date & time range input's clear affordance
|
|
28039
|
+
this.showClear = computed(() => this.clearable() &&
|
|
28040
|
+
this.rangeInput.hasValue() &&
|
|
28041
|
+
(this.rangeInput.focused() || this.rangeInput.pickerOpen()) &&
|
|
28042
|
+
this.rangeInput.interactive(), /* @ts-ignore */
|
|
28043
|
+
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
28044
|
+
}
|
|
28045
|
+
handleClearClick(event) {
|
|
28046
|
+
// clearing must not bubble into the form field's frame-click handling
|
|
28047
|
+
event.stopPropagation();
|
|
28048
|
+
this.rangeInput.clearRange();
|
|
28049
|
+
}
|
|
28050
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28051
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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-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"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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 mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:11em;min-inline-size:0;container:et-time-range-input / inline-size;color:inherit}et-time-range-input .et-time-range-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-range-input .et-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-range-input .et-time-range-input-field:disabled{cursor:not-allowed}et-time-range-input[data-mixed] .et-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-time-range-input .et-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@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 }); }
|
|
28052
|
+
}
|
|
28053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputComponent, decorators: [{
|
|
28054
|
+
type: Component,
|
|
28055
|
+
args: [{ selector: 'et-time-range-input', encapsulation: ViewEncapsulation.None, imports: [
|
|
28056
|
+
ControlSuffixDirective,
|
|
28057
|
+
...TIME_PICKER_IMPORTS,
|
|
28058
|
+
TimeRangeInputFieldDirective,
|
|
28059
|
+
DatePickerSurfaceDirective,
|
|
28060
|
+
DatePickerTriggerDirective,
|
|
28061
|
+
DatePickerPanelComponent,
|
|
28062
|
+
IconDirective,
|
|
28063
|
+
InputMaskDirective,
|
|
28064
|
+
], providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [
|
|
28065
|
+
{
|
|
28066
|
+
directive: TimeRangeInputDirective,
|
|
28067
|
+
inputs: [
|
|
28068
|
+
'value',
|
|
28069
|
+
'mixed',
|
|
28070
|
+
'mixedLabel',
|
|
28071
|
+
'touched',
|
|
28072
|
+
'disabled',
|
|
28073
|
+
'readonly',
|
|
28074
|
+
'invalid',
|
|
28075
|
+
'errors',
|
|
28076
|
+
'required',
|
|
28077
|
+
'name',
|
|
28078
|
+
'startPlaceholder',
|
|
28079
|
+
'endPlaceholder',
|
|
28080
|
+
'parseErrorMessage',
|
|
28081
|
+
'valueFormat',
|
|
28082
|
+
'displayFormat',
|
|
28083
|
+
'locale',
|
|
28084
|
+
'mask',
|
|
28085
|
+
'minTime',
|
|
28086
|
+
'maxTime',
|
|
28087
|
+
'timeFilter',
|
|
28088
|
+
'pickerOpen',
|
|
28089
|
+
],
|
|
28090
|
+
outputs: ['valueChange', 'mixedChange', 'touchedChange', 'pickerOpenChange'],
|
|
28091
|
+
},
|
|
28092
|
+
], host: {
|
|
28093
|
+
class: 'et-time-range-input',
|
|
28094
|
+
role: 'group',
|
|
28095
|
+
'[attr.aria-labelledby]': 'rangeInput.labelId()',
|
|
28096
|
+
}, 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 <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\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 [rangeValue]=\"rangeInput.calendarRange()\"\n [format]=\"rangeInput.effectiveDisplayFormat()\"\n [locale]=\"rangeInput.effectiveLocale()\"\n [minuteStep]=\"minuteStep()\"\n [secondStep]=\"secondStep()\"\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 mode=\"range\"\n />\n </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:11em;min-inline-size:0;container:et-time-range-input / inline-size;color:inherit}et-time-range-input .et-time-range-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-range-input .et-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-range-input .et-time-range-input-field:disabled{cursor:not-allowed}et-time-range-input[data-mixed] .et-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-time-range-input .et-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@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"] }]
|
|
28097
|
+
}], propDecorators: { startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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 }] }] } });
|
|
28098
|
+
|
|
28099
|
+
const TIME_RANGE_INPUT_IMPORTS = [
|
|
28100
|
+
TimeRangeInputComponent,
|
|
28101
|
+
TimeRangeInputDirective,
|
|
28102
|
+
TimeRangeInputFieldDirective,
|
|
28103
|
+
DatePickerTriggerDirective,
|
|
28104
|
+
DatePickerSurfaceDirective,
|
|
28105
|
+
];
|
|
28106
|
+
|
|
27176
28107
|
class DescriptionComponent {
|
|
27177
28108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27178
28109
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DescriptionComponent, isStandalone: true, selector: "et-description", host: { classAttribute: "et-description" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["et-description{display:block;font-size:var(--et-description-font-size, 12px);color:var(--et-surface-color-muted-solid, currentColor)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -32572,7 +33503,7 @@ class RichTextEditorLinkEditorComponent {
|
|
|
32572
33503
|
this.save();
|
|
32573
33504
|
}
|
|
32574
33505
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RichTextEditorLinkEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RichTextEditorLinkEditorComponent, isStandalone: true, selector: "et-rich-text-editor-link-editor", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, newTab: { classPropertyName: "newTab", publicName: "newTab", isSignal: true, isRequired: false, transformFunction: null }, exists: { classPropertyName: "exists", publicName: "exists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveLink: "saveLink", removeLink: "removeLink", dismiss: "dismiss" }, host: { attributes: { "role": "dialog" }, listeners: { "keydown.escape": "dismiss.emit()" }, properties: { "attr.aria-label": "labels().linkEditor" }, classAttribute: "et-rte-link-editor" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div class=\"et-rte-link-editor-header\">\n <span class=\"et-rte-link-editor-title\">{{ title() }}</span>\n <button\n [attr.aria-label]=\"labels().linkEditorClose\"\n (click)=\"dismiss.emit()\"\n et-icon-button\n size=\"sm\"\n type=\"button\"\n variant=\"transparent\"\n color=\"surface\"\n pressedColor=\"inherit\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n</div>\n\n<et-form-field size=\"sm\">\n <et-label>{{ labels().linkTextLabel }}</et-label>\n <et-input\n [value]=\"textValue()\"\n [placeholder]=\"labels().linkTextPlaceholder\"\n (valueChange)=\"textValue.set($event)\"\n (keydown.enter)=\"saveOnEnter($event)\"\n />\n</et-form-field>\n\n<et-form-field size=\"sm\">\n <et-label>{{ labels().linkUrlLabel }}</et-label>\n <et-input\n [value]=\"urlValue()\"\n [placeholder]=\"labels().linkUrlPlaceholder\"\n (valueChange)=\"urlValue.set($event)\"\n (keydown.enter)=\"saveOnEnter($event)\"\n type=\"url\"\n />\n</et-form-field>\n\n<et-choice-field size=\"sm\">\n <et-checkbox [checked]=\"newTabValue()\" (checkedChange)=\"newTabValue.set($event)\" />\n <et-label>{{ labels().linkNewTab }}</et-label>\n</et-choice-field>\n\n<div class=\"et-rte-link-editor-actions\">\n @if (exists()) {\n <button (click)=\"removeLink.emit()\" et-text-button size=\"sm\" type=\"button\">{{ labels().linkRemove }}</button>\n }\n <button [disabled]=\"!urlValue().trim()\" (click)=\"save()\" et-button size=\"sm\" type=\"button\">\n {{ exists() ? labels().linkUpdate : labels().linkAdd }}\n </button>\n</div>\n", styles: ["@layer components{@property --et-rich-text-editor-link-editor-width{syntax: \"<length>\"; inherits: true; initial-value: 288px;}@property --et-rich-text-editor-link-editor-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-link-editor-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-link-editor-padding{syntax: \"<length>\"; inherits: true; initial-value: 14px;}.et-overlay.et-rte-link-editor-overlay{background:var(--et-surface-background-solid, var(--et-surface-2, rgb(30 30 30)));border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));box-shadow:0 12px 32px #0000003d}.et-overlay.et-rte-link-editor-overlay.et-overlay--anchored-dialog{inline-size:var(--et-rich-text-editor-link-editor-width);max-inline-size:calc(100vw - 32px);border-radius:var(--et-rich-text-editor-link-editor-radius)}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog{--_et-rte-link-editor-nudge-x: 0px;--_et-rte-link-editor-nudge-y: 0px}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=top]){--_et-rte-link-editor-nudge-y: .45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=bottom]){--_et-rte-link-editor-nudge-y: -.45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=left]){--_et-rte-link-editor-nudge-x: .45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=right]){--_et-rte-link-editor-nudge-x: -.45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0;transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--_et-rte-link-editor-nudge-x),var(--_et-rte-link-editor-nudge-y))!important}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog{--_et-rte-link-editor-nudge-x: 0px;--_et-rte-link-editor-nudge-y: 0px}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-active{transition:opacity .2s ease}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-active{transition:opacity .14s ease}}.et-overlay.et-rte-link-editor-overlay.et-overlay--top-sheet{border-end-start-radius:var(--et-rich-text-editor-link-editor-radius);border-end-end-radius:var(--et-rich-text-editor-link-editor-radius)}.et-rte-link-editor{display:flex;flex-direction:column;gap:var(--et-rich-text-editor-link-editor-gap);inline-size:100%;box-sizing:border-box;padding:var(--et-rich-text-editor-link-editor-padding);color:var(--et-surface-color-solid, currentColor)}.et-rte-link-editor-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:2px}.et-rte-link-editor-title{font-weight:600;font-size:1.4rem}.et-overlay--top-sheet .et-rte-link-editor{gap:16px;padding:16px;padding-block-end:max(16px,env(safe-area-inset-bottom))}.et-overlay--top-sheet .et-rte-link-editor-title{font-size:1.6rem}.et-rte-link-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type: InputComponent, selector: "et-input" }, { kind: "component", type: ChoiceFieldComponent, selector: "et-choice-field", inputs: ["size", "variant"] }, { kind: "component", type: CheckboxComponent, selector: "et-checkbox" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
33506
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RichTextEditorLinkEditorComponent, isStandalone: true, selector: "et-rich-text-editor-link-editor", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, newTab: { classPropertyName: "newTab", publicName: "newTab", isSignal: true, isRequired: false, transformFunction: null }, exists: { classPropertyName: "exists", publicName: "exists", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveLink: "saveLink", removeLink: "removeLink", dismiss: "dismiss" }, host: { attributes: { "role": "dialog" }, listeners: { "keydown.escape": "dismiss.emit()" }, properties: { "attr.aria-label": "labels().linkEditor" }, classAttribute: "et-rte-link-editor" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div class=\"et-rte-link-editor-header\">\n <span class=\"et-rte-link-editor-title\">{{ title() }}</span>\n <button\n [attr.aria-label]=\"labels().linkEditorClose\"\n (click)=\"dismiss.emit()\"\n et-icon-button\n size=\"sm\"\n type=\"button\"\n variant=\"transparent\"\n color=\"surface\"\n pressedColor=\"inherit\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n</div>\n\n<et-form-field size=\"sm\">\n <et-label>{{ labels().linkTextLabel }}</et-label>\n <et-input\n [value]=\"textValue()\"\n [placeholder]=\"labels().linkTextPlaceholder\"\n (valueChange)=\"textValue.set($event)\"\n (keydown.enter)=\"saveOnEnter($event)\"\n />\n</et-form-field>\n\n<et-form-field size=\"sm\">\n <et-label>{{ labels().linkUrlLabel }}</et-label>\n <et-input\n [value]=\"urlValue()\"\n [placeholder]=\"labels().linkUrlPlaceholder\"\n (valueChange)=\"urlValue.set($event)\"\n (keydown.enter)=\"saveOnEnter($event)\"\n type=\"url\"\n />\n</et-form-field>\n\n<et-choice-field size=\"sm\">\n <et-checkbox [checked]=\"newTabValue()\" (checkedChange)=\"newTabValue.set($event)\" />\n <et-label>{{ labels().linkNewTab }}</et-label>\n</et-choice-field>\n\n<div class=\"et-rte-link-editor-actions\">\n @if (exists()) {\n <button (click)=\"removeLink.emit()\" et-text-button size=\"sm\" type=\"button\">{{ labels().linkRemove }}</button>\n }\n <button [disabled]=\"!urlValue().trim()\" (click)=\"save()\" et-button size=\"sm\" type=\"button\">\n {{ exists() ? labels().linkUpdate : labels().linkAdd }}\n </button>\n</div>\n", styles: ["@layer components{@property --et-rich-text-editor-link-editor-width{syntax: \"<length>\"; inherits: true; initial-value: 288px;}@property --et-rich-text-editor-link-editor-radius{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-link-editor-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-link-editor-padding{syntax: \"<length>\"; inherits: true; initial-value: 14px;}.et-overlay.et-rte-link-editor-overlay{background:var(--et-surface-background-solid, var(--et-surface-2, rgb(30 30 30)));border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));box-shadow:0 12px 32px #0000003d}.et-overlay.et-rte-link-editor-overlay.et-overlay--anchored-dialog{inline-size:var(--et-rich-text-editor-link-editor-width);max-inline-size:calc(100vw - 32px);border-radius:var(--et-rich-text-editor-link-editor-radius)}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog{--_et-rte-link-editor-nudge-x: 0px;--_et-rte-link-editor-nudge-y: 0px}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=top]){--_et-rte-link-editor-nudge-y: .45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=bottom]){--_et-rte-link-editor-nudge-y: -.45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=left]){--_et-rte-link-editor-nudge-x: .45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog:where([data-overlay-placement^=right]){--_et-rte-link-editor-nudge-x: -.45rem}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0;transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(var(--_et-rte-link-editor-nudge-x),var(--_et-rte-link-editor-nudge-y))!important}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .2s ease,opacity .2s ease}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .14s ease,opacity .14s ease}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog{--_et-rte-link-editor-nudge-x: 0px;--_et-rte-link-editor-nudge-y: 0px}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-enter-active{transition:opacity .2s ease}.et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog.et-animation-leave-active{transition:opacity .14s ease}}.et-overlay.et-rte-link-editor-overlay.et-overlay--top-sheet{border-end-start-radius:var(--et-rich-text-editor-link-editor-radius);border-end-end-radius:var(--et-rich-text-editor-link-editor-radius)}.et-rte-link-editor{display:flex;flex-direction:column;gap:var(--et-rich-text-editor-link-editor-gap);inline-size:100%;box-sizing:border-box;padding:var(--et-rich-text-editor-link-editor-padding);color:var(--et-surface-color-solid, currentColor)}.et-rte-link-editor-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:2px}.et-rte-link-editor-title{font-weight:600;font-size:1.4rem}.et-overlay--top-sheet .et-rte-link-editor{gap:16px;padding:16px;padding-block-end:max(16px,env(safe-area-inset-bottom))}.et-overlay--top-sheet .et-rte-link-editor-title{font-size:1.6rem}.et-rte-link-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type: InputComponent, selector: "et-input" }, { kind: "component", type: ChoiceFieldComponent, selector: "et-choice-field", inputs: ["size", "variant", "controlPosition"] }, { kind: "component", type: CheckboxComponent, selector: "et-checkbox" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
32576
33507
|
}
|
|
32577
33508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RichTextEditorLinkEditorComponent, decorators: [{
|
|
32578
33509
|
type: Component,
|
|
@@ -41334,7 +42265,31 @@ class SelectViewportDirective {
|
|
|
41334
42265
|
constructor() {
|
|
41335
42266
|
this.select = inject(SelectDirective, { optional: true });
|
|
41336
42267
|
this.elementRef = inject(ElementRef);
|
|
42268
|
+
this.dimensions = signalElementDimensions(this.elementRef);
|
|
42269
|
+
// a panel that does not mirror the field takes its width from the rendered rows, and windowing
|
|
42270
|
+
// only ever renders the rows around the scroll offset - so the panel would resize on every
|
|
42271
|
+
// scroll, as long labels enter and leave the window
|
|
42272
|
+
this.locksWidth = computed(() => {
|
|
42273
|
+
const select = this.select;
|
|
42274
|
+
return !!select?.options() && !select.mirrorPanelWidth();
|
|
42275
|
+
}, /* @ts-ignore */
|
|
42276
|
+
...(ngDevMode ? [{ debugName: "locksWidth" }] : /* istanbul ignore next */ []));
|
|
42277
|
+
this.widthFloor = linkedSignal({ ...(ngDevMode ? { debugName: "widthFloor" } : /* istanbul ignore next */ {}),
|
|
42278
|
+
// a new query is a new set of rows - the panel may size down to fit them again
|
|
42279
|
+
source: () => this.select?.panelFilterQuery() ?? '',
|
|
42280
|
+
computation: () => 0 });
|
|
42281
|
+
this.minInlineSize = computed(() => (this.locksWidth() ? this.widthFloor() || null : null), /* @ts-ignore */
|
|
42282
|
+
...(ngDevMode ? [{ debugName: "minInlineSize" }] : /* istanbul ignore next */ []));
|
|
41337
42283
|
registerSingleton(this.select?.registeredViewport, this);
|
|
42284
|
+
effect(() => {
|
|
42285
|
+
if (!this.locksWidth()) {
|
|
42286
|
+
return;
|
|
42287
|
+
}
|
|
42288
|
+
const width = this.dimensions().offset?.width ?? 0;
|
|
42289
|
+
if (width > untracked(this.widthFloor)) {
|
|
42290
|
+
this.widthFloor.set(width);
|
|
42291
|
+
}
|
|
42292
|
+
});
|
|
41338
42293
|
if (ngDevMode) {
|
|
41339
42294
|
afterNextRender(() => {
|
|
41340
42295
|
if (!this.select) {
|
|
@@ -41344,13 +42299,16 @@ class SelectViewportDirective {
|
|
|
41344
42299
|
}
|
|
41345
42300
|
}
|
|
41346
42301
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
41347
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectViewportDirective, isStandalone: true, selector: "[etSelectViewport]", exportAs: ["etSelectViewport"], ngImport: i0 }); }
|
|
42302
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectViewportDirective, isStandalone: true, selector: "[etSelectViewport]", host: { properties: { "style.min-inline-size.px": "minInlineSize()" } }, exportAs: ["etSelectViewport"], ngImport: i0 }); }
|
|
41348
42303
|
}
|
|
41349
42304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectViewportDirective, decorators: [{
|
|
41350
42305
|
type: Directive,
|
|
41351
42306
|
args: [{
|
|
41352
42307
|
selector: '[etSelectViewport]',
|
|
41353
42308
|
exportAs: 'etSelectViewport',
|
|
42309
|
+
host: {
|
|
42310
|
+
'[style.min-inline-size.px]': 'minInlineSize()',
|
|
42311
|
+
},
|
|
41354
42312
|
}]
|
|
41355
42313
|
}], ctorParameters: () => [] });
|
|
41356
42314
|
|
|
@@ -42729,6 +43687,13 @@ class CheckboxOptionComponent {
|
|
|
42729
43687
|
*/
|
|
42730
43688
|
this.variant = input(CHECKBOX_OPTION_VARIANTS.PLAIN, /* @ts-ignore */
|
|
42731
43689
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
43690
|
+
/**
|
|
43691
|
+
* Which end of the card the control sits at. `'end'` keeps the label leading and the control trailing;
|
|
43692
|
+
* `'start'` puts the control first, ahead of any `[etSelectionCardLeading]` media. Only `variant="card"`
|
|
43693
|
+
* reads it. @default 'end'
|
|
43694
|
+
*/
|
|
43695
|
+
this.controlPosition = input(SELECTION_CARD_CONTROL_POSITIONS.END, /* @ts-ignore */
|
|
43696
|
+
...(ngDevMode ? [{ debugName: "controlPosition" }] : /* istanbul ignore next */ []));
|
|
42732
43697
|
this.canAnimate = createCanAnimateSignal();
|
|
42733
43698
|
effect(() => {
|
|
42734
43699
|
if (this.variant() === CHECKBOX_OPTION_VARIANTS.CARD) {
|
|
@@ -42737,7 +43702,7 @@ class CheckboxOptionComponent {
|
|
|
42737
43702
|
});
|
|
42738
43703
|
}
|
|
42739
43704
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.et-selection-card": "variant() === 'card'", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box et-selection-card-control\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option[data-readonly]{cursor:default}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-checkbox-option:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
43705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, controlPosition: { classPropertyName: "controlPosition", publicName: "controlPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.et-selection-card": "variant() === 'card'", "attr.data-control-position": "variant() === 'card' ? controlPosition() : null", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box et-selection-card-control\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<ng-content select=\"[etSelectionCardLeading]\" />\n<div class=\"et-checkbox-option-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n<ng-content select=\"[etSelectionCardTrailing]\" />\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option[data-readonly]{cursor:default}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-checkbox-option:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
42741
43706
|
}
|
|
42742
43707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxOptionComponent, decorators: [{
|
|
42743
43708
|
type: Component,
|
|
@@ -42752,9 +43717,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
42752
43717
|
class: 'et-checkbox-option',
|
|
42753
43718
|
'[attr.data-variant]': 'variant()',
|
|
42754
43719
|
'[class.et-selection-card]': "variant() === 'card'",
|
|
43720
|
+
'[attr.data-control-position]': "variant() === 'card' ? controlPosition() : null",
|
|
42755
43721
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
42756
|
-
}, template: "<div class=\"et-checkbox-option-box et-selection-card-control\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<div class=\"et-checkbox-option-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option[data-readonly]{cursor:default}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-checkbox-option:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"] }]
|
|
42757
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
43722
|
+
}, template: "<div class=\"et-checkbox-option-box et-selection-card-control\">\n <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n <path\n d=\"M1 5L4.5 8.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</div>\n<ng-content select=\"[etSelectionCardLeading]\" />\n<div class=\"et-checkbox-option-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n<ng-content select=\"[etSelectionCardTrailing]\" />\n", styles: ["@layer components{@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option[data-readonly]{cursor:default}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-check path{stroke-dasharray:15;stroke-dashoffset:15}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-checkbox-option:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option:active:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-option-box{transform:scale(.92)}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check path{stroke-dashoffset:0}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5)}et-checkbox-option[data-can-animate] .et-checkbox-option-check path{transition:stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease}et-checkbox-option[data-can-animate][aria-checked=true] .et-checkbox-option-check{transition:opacity 0s 0s}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}}\n"] }]
|
|
43723
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }] } });
|
|
42758
43724
|
|
|
42759
43725
|
class RadioGroupComponent {
|
|
42760
43726
|
constructor() {
|
|
@@ -42844,6 +43810,13 @@ class RadioComponent {
|
|
|
42844
43810
|
*/
|
|
42845
43811
|
this.variant = input(RADIO_VARIANTS.PLAIN, /* @ts-ignore */
|
|
42846
43812
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
43813
|
+
/**
|
|
43814
|
+
* Which end of the card the control sits at. `'end'` keeps the label leading and the control trailing;
|
|
43815
|
+
* `'start'` puts the control first, ahead of any `[etSelectionCardLeading]` media. Only `variant="card"`
|
|
43816
|
+
* reads it. @default 'end'
|
|
43817
|
+
*/
|
|
43818
|
+
this.controlPosition = input(SELECTION_CARD_CONTROL_POSITIONS.END, /* @ts-ignore */
|
|
43819
|
+
...(ngDevMode ? [{ debugName: "controlPosition" }] : /* istanbul ignore next */ []));
|
|
42847
43820
|
this.canAnimate = createCanAnimateSignal();
|
|
42848
43821
|
effect(() => {
|
|
42849
43822
|
if (this.variant() === RADIO_VARIANTS.CARD) {
|
|
@@ -42852,7 +43825,7 @@ class RadioComponent {
|
|
|
42852
43825
|
});
|
|
42853
43826
|
}
|
|
42854
43827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42855
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: RadioComponent, isStandalone: true, selector: "et-radio", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.et-selection-card": "variant() === 'card'", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle et-selection-card-control\"></div>\n<div class=\"et-radio-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio[data-readonly]{cursor:default}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-radio:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]):not([data-readonly]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
43828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: RadioComponent, isStandalone: true, selector: "et-radio", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, controlPosition: { classPropertyName: "controlPosition", publicName: "controlPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.et-selection-card": "variant() === 'card'", "attr.data-control-position": "variant() === 'card' ? controlPosition() : null", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle et-selection-card-control\"></div>\n<ng-content select=\"[etSelectionCardLeading]\" />\n<div class=\"et-radio-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n<ng-content select=\"[etSelectionCardTrailing]\" />\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio[data-readonly]{cursor:default}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-radio:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]):not([data-readonly]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
42856
43829
|
}
|
|
42857
43830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioComponent, decorators: [{
|
|
42858
43831
|
type: Component,
|
|
@@ -42867,9 +43840,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
42867
43840
|
class: 'et-radio',
|
|
42868
43841
|
'[attr.data-variant]': 'variant()',
|
|
42869
43842
|
'[class.et-selection-card]': "variant() === 'card'",
|
|
43843
|
+
'[attr.data-control-position]': "variant() === 'card' ? controlPosition() : null",
|
|
42870
43844
|
'[attr.data-can-animate]': 'canAnimate.state() || null',
|
|
42871
|
-
}, template: "<div class=\"et-radio-circle et-selection-card-control\"></div>\n<div class=\"et-radio-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio[data-readonly]{cursor:default}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-radio:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]):not([data-readonly]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"] }]
|
|
42872
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
43845
|
+
}, template: "<div class=\"et-radio-circle et-selection-card-control\"></div>\n<ng-content select=\"[etSelectionCardLeading]\" />\n<div class=\"et-radio-content et-selection-card-content\">\n <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label et-selection-card-label\">\n <ng-content />\n </span>\n <ng-content select=\"et-description\" />\n</div>\n<ng-content select=\"[etSelectionCardTrailing]\" />\n", styles: ["@layer components{@property --et-radio-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio[data-readonly]{cursor:default}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background-color:transparent;display:grid;place-items:center}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{font-size:14px;line-height:20px;color:var(--et-surface-color-solid, currentColor)}@media(hover:hover){et-radio:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]) .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio:active:not([aria-disabled=true]):not([data-readonly]) .et-radio-circle{transform:scale(.92)}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor);background-color:transparent}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease,background-color var(--et-radio-transition-duration) ease,transform var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}}\n"] }]
|
|
43846
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }] } });
|
|
42873
43847
|
|
|
42874
43848
|
/**
|
|
42875
43849
|
* The headless selection engine only (`etSelectionList`, `etSelectionOption`, `etSelectionListControl`) -
|
|
@@ -44560,6 +45534,7 @@ const GRID_ERROR_CODES = {
|
|
|
44560
45534
|
DUPLICATE_ITEM_ID: 1902,
|
|
44561
45535
|
INVALID_LAYOUT_STATE: 1903,
|
|
44562
45536
|
UNKNOWN_ITEM_TYPE: 1904,
|
|
45537
|
+
DUPLICATE_ITEM_RENDER: 1905,
|
|
44563
45538
|
};
|
|
44564
45539
|
|
|
44565
45540
|
const DEFAULT_GRID_CONFIG = {
|
|
@@ -46488,10 +47463,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
46488
47463
|
class GridItemRef {
|
|
46489
47464
|
}
|
|
46490
47465
|
|
|
46491
|
-
|
|
46492
|
-
|
|
46493
|
-
|
|
46494
|
-
|
|
47466
|
+
/**
|
|
47467
|
+
* Bridges a backend's item shape to the grid's `GridItemConfig` and back - one mapper per direction,
|
|
47468
|
+
* each mapping a single item. `breakpoints` is the single source of truth for the layout keys; bind
|
|
47469
|
+
* `adapter.breakpoints` into the grid's `breakpoints` input so the two cannot drift.
|
|
47470
|
+
*/
|
|
47471
|
+
const createGridAdapter = (options) => {
|
|
47472
|
+
const breakpoints = Object.entries(options.breakpoints).map(([name, geometry]) => ({ name, ...geometry }));
|
|
47473
|
+
return {
|
|
47474
|
+
breakpoints,
|
|
47475
|
+
fromExternal: (items) => items.map(options.fromExternal),
|
|
47476
|
+
// The grid places every item on every configured breakpoint, so what it emits is total over the
|
|
47477
|
+
// adapter's names - which the emitted type cannot say. An item the grid has not placed yet
|
|
47478
|
+
// (`layout: {}`) is the exception, which is why `mapGridLayout` maps keys instead of reading them.
|
|
47479
|
+
toExternal: (items) => items.map((item) => options.toExternal(item)),
|
|
47480
|
+
};
|
|
47481
|
+
};
|
|
47482
|
+
/**
|
|
47483
|
+
* Maps every breakpoint of a layout record through one function, keeping the keys. Use it in either
|
|
47484
|
+
* adapter direction to avoid repeating the position mapping per breakpoint.
|
|
47485
|
+
*/
|
|
47486
|
+
const mapGridLayout = (layout, map) => {
|
|
47487
|
+
const mapped = {};
|
|
47488
|
+
for (const breakpoint of Object.keys(layout)) {
|
|
47489
|
+
mapped[breakpoint] = map(layout[breakpoint], breakpoint);
|
|
47490
|
+
}
|
|
47491
|
+
return mapped;
|
|
47492
|
+
};
|
|
46495
47493
|
/** Map a backend position shaped as `{x, y, cols, rows}` to a `GridItemPosition`. */
|
|
46496
47494
|
const toGridPosition = (pos) => ({
|
|
46497
47495
|
col: pos.x,
|
|
@@ -46757,6 +47755,10 @@ class GridComponent {
|
|
|
46757
47755
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
46758
47756
|
/** Emitted after the layout changed on this side - see `GridDirective.layoutChange`. */
|
|
46759
47757
|
this.layoutChange = output();
|
|
47758
|
+
// Only the items a consumer writes themselves: the ones stamped from a registration live in this
|
|
47759
|
+
// component's own view, which a content query never reaches. The two dev checks below depend on
|
|
47760
|
+
// that split.
|
|
47761
|
+
this.projectedItems = contentChildren(GridItemDirective, { ...(ngDevMode ? { debugName: "projectedItems" } : /* istanbul ignore next */ {}), descendants: true });
|
|
46760
47762
|
// The one seam where the item type is re-attached: a host directive cannot be parameterized by its
|
|
46761
47763
|
// component's generic, so the component owns the typed input/output pair above and hands them to
|
|
46762
47764
|
// the directive, which is the same instance - only with `TData` spelled out.
|
|
@@ -46793,25 +47795,35 @@ class GridComponent {
|
|
|
46793
47795
|
.pipe(tap((state) => this.layoutChange.emit(state)), takeUntilDestroyed())
|
|
46794
47796
|
.subscribe();
|
|
46795
47797
|
if (ngDevMode) {
|
|
46796
|
-
|
|
47798
|
+
// After render, not during: a projected item's required itemId is only readable once the
|
|
47799
|
+
// consumer's bindings have run.
|
|
47800
|
+
afterRenderEffect(() => {
|
|
46797
47801
|
const items = this.grid.currentItems();
|
|
46798
47802
|
if (items.length === 0)
|
|
46799
47803
|
return;
|
|
46800
47804
|
const registrations = this.gridConfig.registrations;
|
|
46801
|
-
const
|
|
46802
|
-
|
|
46803
|
-
|
|
46804
|
-
|
|
47805
|
+
const projectedIds = new Set(this.projectedItems().map((item) => item.itemId()));
|
|
47806
|
+
const doubledIds = this.registeredItems()
|
|
47807
|
+
.map((entry) => entry.item.id)
|
|
47808
|
+
.filter((id) => projectedIds.has(id));
|
|
47809
|
+
if (doubledIds.length > 0) {
|
|
47810
|
+
throw new RuntimeError(GRID_ERROR_CODES.DUPLICATE_ITEM_RENDER, `[GridComponent] Grid item(s) ${doubledIds
|
|
47811
|
+
.map((id) => `"${id}"`)
|
|
47812
|
+
.join(', ')} are rendered twice: their type has a provideGridConfig() registration and a projected <et-grid-item> also covers them. Each item must be rendered by exactly one of the two - project only the items whose type is unregistered.`, doubledIds);
|
|
47813
|
+
}
|
|
47814
|
+
const unrenderedItems = items.filter((item) => !projectedIds.has(item.id) && !registrations.some((r) => r.type === item.type));
|
|
47815
|
+
if (unrenderedItems.length > 0) {
|
|
47816
|
+
const unknownTypes = [...new Set(unrenderedItems.map((item) => item.type))];
|
|
46805
47817
|
const registered = registrations.length ? registrations.map((r) => `"${r.type}"`).join(', ') : 'none';
|
|
46806
|
-
throw new RuntimeError(GRID_ERROR_CODES.UNKNOWN_ITEM_TYPE, `[GridComponent]
|
|
47818
|
+
throw new RuntimeError(GRID_ERROR_CODES.UNKNOWN_ITEM_TYPE, `[GridComponent] Nothing renders grid item type(s) ${unknownTypes
|
|
46807
47819
|
.map((type) => `"${type}"`)
|
|
46808
|
-
.join(', ')}. Registered types: ${registered}. Register
|
|
47820
|
+
.join(', ')}. Registered types: ${registered}. Register the type via provideGridConfig(), or project an <et-grid-item [itemId]> for each of those items.`, unknownTypes);
|
|
46809
47821
|
}
|
|
46810
47822
|
});
|
|
46811
47823
|
}
|
|
46812
47824
|
}
|
|
46813
47825
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { attributes: { "role": "region" }, properties: { "class.et-grid--readonly": "grid.readOnly()", "attr.aria-label": "ariaLabel()" }, classAttribute: "et-grid" }, hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "readOnly", "readOnly"] }], ngImport: i0, template: `
|
|
47826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { attributes: { "role": "region" }, properties: { "class.et-grid--readonly": "grid.readOnly()", "attr.aria-label": "ariaLabel()" }, classAttribute: "et-grid" }, queries: [{ propertyName: "projectedItems", predicate: GridItemDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "readOnly", "readOnly"] }], ngImport: i0, template: `
|
|
46815
47827
|
@if (grid.isReady()) {
|
|
46816
47828
|
@for (entry of registeredItems(); track entry.item.id) {
|
|
46817
47829
|
<!-- The registration's constraints reach the item through the grid's own resolver, so
|
|
@@ -46890,7 +47902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
46890
47902
|
'[class.et-grid--readonly]': 'grid.readOnly()',
|
|
46891
47903
|
'[attr.aria-label]': 'ariaLabel()',
|
|
46892
47904
|
}, styles: ["@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:block;box-sizing:border-box;padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{position:absolute;top:0;left:0;z-index:0;border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);box-sizing:border-box;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
|
|
46893
|
-
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }] } });
|
|
47905
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], projectedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GridItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
46894
47906
|
|
|
46895
47907
|
const posEq = (a, b) => {
|
|
46896
47908
|
if (!a && !b)
|
|
@@ -49529,6 +50541,15 @@ const STATE_ICONS = {
|
|
|
49529
50541
|
* mark it as done with an outcome and recolor the step in the app's matching semantic theme, each
|
|
49530
50542
|
* with its own icon so the outcome does not rest on color alone.
|
|
49531
50543
|
*
|
|
50544
|
+
* Project `[etProgressStepDescription]` for a second, muted line under the label - what the step
|
|
50545
|
+
* covers, what it produced, why it failed:
|
|
50546
|
+
*
|
|
50547
|
+
* @example
|
|
50548
|
+
* <et-progress-step state="current">
|
|
50549
|
+
* Payment
|
|
50550
|
+
* <span etProgressStepDescription>Card ending 4242</span>
|
|
50551
|
+
* </et-progress-step>
|
|
50552
|
+
*
|
|
49532
50553
|
* Write the step as a link or a button to make it interactive - the attribute selector puts the step
|
|
49533
50554
|
* on the consumer's own element, so `routerLink`, `href` and click handlers all stay where they
|
|
49534
50555
|
* belong, and the whole step becomes the target:
|
|
@@ -49565,14 +50586,14 @@ class ProgressStepComponent {
|
|
|
49565
50586
|
});
|
|
49566
50587
|
}
|
|
49567
50588
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ProgressStepComponent, isStandalone: true, selector: "et-progress-step, [et-progress-step]", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()" }, classAttribute: "et-progress-step" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<span class=\"et-progress-step-marker\">\n @if (markerIcon(); as icon) {\n <i [etIcon]=\"icon\"></i>\n } @else {\n <span class=\"et-progress-step-marker-number\"></span>\n }\n</span>\n\n<span class=\"et-progress-step-label\"><ng-content /></span>\n", styles: ["@layer components{@property --et-progress-step-marker-size{syntax: \"<length>\"; inherits: false; initial-value: 24px;}@property --et-progress-step-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-progress-step{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-inline-size:0;counter-increment:et-progress-step}.et-progress-step:not(:last-child):after{content:\"\";position:absolute;inset-block-start:calc(var(--et-progress-step-marker-size) / 2);inset-inline-start:50%;inline-size:calc(100% + var(--et-progress-steps-gap, 8px));block-size:2px;background:var(--et-surface-border-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]):not(:last-child):after{background:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step .et-progress-step-marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;inline-size:var(--et-progress-step-marker-size);block-size:var(--et-progress-step-marker-size);border-radius:50%;border:2px solid var(--et-surface-border-solid, currentColor);background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-muted-solid, currentColor);font-size:calc(var(--et-progress-step-marker-size) * .5);line-height:1}.et-progress-step .et-progress-step-marker .et-icon{inline-size:1em;block-size:1em}.et-progress-step[data-state=current] .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}.et-progress-step .et-progress-step-marker-number:before{content:counter(et-progress-step)}.et-progress-step .et-progress-step-
|
|
50589
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ProgressStepComponent, isStandalone: true, selector: "et-progress-step, [et-progress-step]", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()" }, classAttribute: "et-progress-step" }, hostDirectives: [{ directive: i1.ProvideColorDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<span class=\"et-progress-step-marker\">\n @if (markerIcon(); as icon) {\n <i [etIcon]=\"icon\"></i>\n } @else {\n <span class=\"et-progress-step-marker-number\"></span>\n }\n</span>\n\n<span class=\"et-progress-step-text\">\n <span class=\"et-progress-step-label\"><ng-content /></span>\n\n <ng-content select=\"[etProgressStepDescription]\" />\n</span>\n", styles: ["@layer components{@property --et-progress-step-marker-size{syntax: \"<length>\"; inherits: false; initial-value: 24px;}@property --et-progress-step-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-progress-step-description-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-progress-step{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-inline-size:0;counter-increment:et-progress-step}.et-progress-step:not(:last-child):after{content:\"\";position:absolute;inset-block-start:calc(var(--et-progress-step-marker-size) / 2);inset-inline-start:50%;inline-size:calc(100% + var(--et-progress-steps-gap, 8px));block-size:2px;background:var(--et-surface-border-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]):not(:last-child):after{background:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step .et-progress-step-marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;inline-size:var(--et-progress-step-marker-size);block-size:var(--et-progress-step-marker-size);border-radius:50%;border:2px solid var(--et-surface-border-solid, currentColor);background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-muted-solid, currentColor);font-size:calc(var(--et-progress-step-marker-size) * .5);line-height:1}.et-progress-step .et-progress-step-marker .et-icon{inline-size:1em;block-size:1em}.et-progress-step[data-state=current] .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}.et-progress-step .et-progress-step-marker-number:before{content:counter(et-progress-step)}.et-progress-step .et-progress-step-text{display:flex;flex-direction:column;gap:2px;min-inline-size:0;font-size:var(--et-progress-step-label-font-size);text-align:center}.et-progress-step .et-progress-step-label{color:var(--et-surface-color-muted-solid, currentColor)}.et-progress-step [etProgressStepDescription]{margin:0;font-size:var(--et-progress-step-description-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-progress-step[data-state=current] .et-progress-step-label{color:var(--et-surface-color-solid, currentColor);font-weight:600}.et-progress-step:is([data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-label{color:var(--et-theme-color-ink-solid, currentColor);font-weight:600}.et-progress-steps[data-orientation=vertical] .et-progress-step{flex:none;flex-direction:row;align-items:flex-start}.et-progress-steps[data-orientation=vertical] .et-progress-step:not(:last-child):after{inset-block-start:var(--et-progress-step-marker-size);inset-inline-start:calc(var(--et-progress-step-marker-size) / 2 - 1px);inline-size:2px;block-size:calc(100% - var(--et-progress-step-marker-size) + var(--et-progress-steps-gap, 8px))}.et-progress-steps[data-orientation=vertical] .et-progress-step .et-progress-step-text{text-align:start;padding-block-start:calc((var(--et-progress-step-marker-size) - 1lh) / 2)}.et-progress-step:is(a,button){cursor:pointer;text-decoration:none;color:inherit;font:inherit;background:none;border:none;padding:0;appearance:none;-webkit-tap-highlight-color:transparent}@media(hover:hover){.et-progress-step:is(a,button):hover .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is(a,button):hover .et-progress-step-label{color:var(--et-surface-color-solid, currentColor)}}.et-progress-step:is(a,button):is([disabled],[aria-disabled=true]){cursor:not-allowed;pointer-events:none}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], viewProviders: [provideIcons(CHECK_ICON, TIMES_ICON, TRIANGLE_EXCLAMATION_ICON)], encapsulation: i0.ViewEncapsulation.None }); }
|
|
49569
50590
|
}
|
|
49570
50591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressStepComponent, decorators: [{
|
|
49571
50592
|
type: Component,
|
|
49572
50593
|
args: [{ selector: 'et-progress-step, [et-progress-step]', encapsulation: ViewEncapsulation.None, imports: [IconDirective], viewProviders: [provideIcons(CHECK_ICON, TIMES_ICON, TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [ProvideColorDirective, FocusRingDirective], host: {
|
|
49573
50594
|
class: 'et-progress-step',
|
|
49574
50595
|
'[attr.data-state]': 'state()',
|
|
49575
|
-
}, template: "<span class=\"et-progress-step-marker\">\n @if (markerIcon(); as icon) {\n <i [etIcon]=\"icon\"></i>\n } @else {\n <span class=\"et-progress-step-marker-number\"></span>\n }\n</span>\n\n<span class=\"et-progress-step-label\"><ng-content /></span>\n", styles: ["@layer components{@property --et-progress-step-marker-size{syntax: \"<length>\"; inherits: false; initial-value: 24px;}@property --et-progress-step-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}.et-progress-step{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-inline-size:0;counter-increment:et-progress-step}.et-progress-step:not(:last-child):after{content:\"\";position:absolute;inset-block-start:calc(var(--et-progress-step-marker-size) / 2);inset-inline-start:50%;inline-size:calc(100% + var(--et-progress-steps-gap, 8px));block-size:2px;background:var(--et-surface-border-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]):not(:last-child):after{background:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step .et-progress-step-marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;inline-size:var(--et-progress-step-marker-size);block-size:var(--et-progress-step-marker-size);border-radius:50%;border:2px solid var(--et-surface-border-solid, currentColor);background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-muted-solid, currentColor);font-size:calc(var(--et-progress-step-marker-size) * .5);line-height:1}.et-progress-step .et-progress-step-marker .et-icon{inline-size:1em;block-size:1em}.et-progress-step[data-state=current] .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}.et-progress-step .et-progress-step-marker-number:before{content:counter(et-progress-step)}.et-progress-step .et-progress-step-
|
|
50596
|
+
}, template: "<span class=\"et-progress-step-marker\">\n @if (markerIcon(); as icon) {\n <i [etIcon]=\"icon\"></i>\n } @else {\n <span class=\"et-progress-step-marker-number\"></span>\n }\n</span>\n\n<span class=\"et-progress-step-text\">\n <span class=\"et-progress-step-label\"><ng-content /></span>\n\n <ng-content select=\"[etProgressStepDescription]\" />\n</span>\n", styles: ["@layer components{@property --et-progress-step-marker-size{syntax: \"<length>\"; inherits: false; initial-value: 24px;}@property --et-progress-step-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 14px;}@property --et-progress-step-description-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}.et-progress-step{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-inline-size:0;counter-increment:et-progress-step}.et-progress-step:not(:last-child):after{content:\"\";position:absolute;inset-block-start:calc(var(--et-progress-step-marker-size) / 2);inset-inline-start:50%;inline-size:calc(100% + var(--et-progress-steps-gap, 8px));block-size:2px;background:var(--et-surface-border-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]):not(:last-child):after{background:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step .et-progress-step-marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;inline-size:var(--et-progress-step-marker-size);block-size:var(--et-progress-step-marker-size);border-radius:50%;border:2px solid var(--et-surface-border-solid, currentColor);background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-muted-solid, currentColor);font-size:calc(var(--et-progress-step-marker-size) * .5);line-height:1}.et-progress-step .et-progress-step-marker .et-icon{inline-size:1em;block-size:1em}.et-progress-step[data-state=current] .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is([data-state=complete],[data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}.et-progress-step .et-progress-step-marker-number:before{content:counter(et-progress-step)}.et-progress-step .et-progress-step-text{display:flex;flex-direction:column;gap:2px;min-inline-size:0;font-size:var(--et-progress-step-label-font-size);text-align:center}.et-progress-step .et-progress-step-label{color:var(--et-surface-color-muted-solid, currentColor)}.et-progress-step [etProgressStepDescription]{margin:0;font-size:var(--et-progress-step-description-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-progress-step[data-state=current] .et-progress-step-label{color:var(--et-surface-color-solid, currentColor);font-weight:600}.et-progress-step:is([data-state=success],[data-state=warning],[data-state=error]) .et-progress-step-label{color:var(--et-theme-color-ink-solid, currentColor);font-weight:600}.et-progress-steps[data-orientation=vertical] .et-progress-step{flex:none;flex-direction:row;align-items:flex-start}.et-progress-steps[data-orientation=vertical] .et-progress-step:not(:last-child):after{inset-block-start:var(--et-progress-step-marker-size);inset-inline-start:calc(var(--et-progress-step-marker-size) / 2 - 1px);inline-size:2px;block-size:calc(100% - var(--et-progress-step-marker-size) + var(--et-progress-steps-gap, 8px))}.et-progress-steps[data-orientation=vertical] .et-progress-step .et-progress-step-text{text-align:start;padding-block-start:calc((var(--et-progress-step-marker-size) - 1lh) / 2)}.et-progress-step:is(a,button){cursor:pointer;text-decoration:none;color:inherit;font:inherit;background:none;border:none;padding:0;appearance:none;-webkit-tap-highlight-color:transparent}@media(hover:hover){.et-progress-step:is(a,button):hover .et-progress-step-marker{border-color:var(--et-theme-color-primary-solid, currentColor)}.et-progress-step:is(a,button):hover .et-progress-step-label{color:var(--et-surface-color-solid, currentColor)}}.et-progress-step:is(a,button):is([disabled],[aria-disabled=true]){cursor:not-allowed;pointer-events:none}}\n"] }]
|
|
49576
50597
|
}], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
|
|
49577
50598
|
|
|
49578
50599
|
const PROGRESS_STEPS_ORIENTATIONS = {
|
|
@@ -49961,6 +50982,7 @@ const DEFAULT_SCHEDULER_LABELS = {
|
|
|
49961
50982
|
addSubAppointment: 'Add sub-appointment',
|
|
49962
50983
|
deleteWithDescendants: 'Delete (with descendants)',
|
|
49963
50984
|
titleField: 'Title',
|
|
50985
|
+
timeRangeField: 'When',
|
|
49964
50986
|
startField: 'Starts',
|
|
49965
50987
|
endField: 'Ends',
|
|
49966
50988
|
locationField: 'Location',
|
|
@@ -51381,7 +52403,7 @@ class SchedulerEditColorComponent {
|
|
|
51381
52403
|
<et-input [value]="textValue()" (valueChange)="updateColorToken($event)" />
|
|
51382
52404
|
</et-form-field>
|
|
51383
52405
|
}
|
|
51384
|
-
`, isInline: true, styles: ["@layer components{.et-scheduler-edit-color-swatch{display:inline-block;vertical-align:middle;margin-inline-end:6px;inline-size:14px;block-size:14px;border-radius:4px;background:var(--et-theme-color-primary-solid, currentColor)}.et-scheduler-edit-color-swatch:where([data-empty]){background:transparent;border:1px solid var(--et-surface-border-solid, currentColor)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type: InputComponent, selector: "et-input" }, { kind: "component", type: RadioGroupComponent, selector: "et-radio-group", inputs: ["size", "orientation"] }, { kind: "component", type: RadioComponent, selector: "et-radio", inputs: ["variant"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
52406
|
+
`, isInline: true, styles: ["@layer components{.et-scheduler-edit-color-swatch{display:inline-block;vertical-align:middle;margin-inline-end:6px;inline-size:14px;block-size:14px;border-radius:4px;background:var(--et-theme-color-primary-solid, currentColor)}.et-scheduler-edit-color-swatch:where([data-empty]){background:transparent;border:1px solid var(--et-surface-border-solid, currentColor)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type: InputComponent, selector: "et-input" }, { kind: "component", type: RadioGroupComponent, selector: "et-radio-group", inputs: ["size", "orientation"] }, { kind: "component", type: RadioComponent, selector: "et-radio", inputs: ["variant", "controlPosition"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
51385
52407
|
}
|
|
51386
52408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SchedulerEditColorComponent, decorators: [{
|
|
51387
52409
|
type: Component,
|
|
@@ -51597,41 +52619,38 @@ class SchedulerEditTimeRangeComponent {
|
|
|
51597
52619
|
this.dateFormat = injectDateFormat();
|
|
51598
52620
|
this.draft = input.required(/* @ts-ignore */
|
|
51599
52621
|
...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
52622
|
+
this.label = computed(() => this.labels().timeRangeField, /* @ts-ignore */
|
|
52623
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
51600
52624
|
this.startLabel = computed(() => this.labels().startField, /* @ts-ignore */
|
|
51601
52625
|
...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
|
|
51602
52626
|
this.endLabel = computed(() => this.labels().endField, /* @ts-ignore */
|
|
51603
52627
|
...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
|
|
51604
|
-
this.
|
|
51605
|
-
|
|
51606
|
-
|
|
51607
|
-
|
|
51608
|
-
|
|
51609
|
-
updateStart(value) {
|
|
51610
|
-
if (!value) {
|
|
51611
|
-
return;
|
|
51612
|
-
}
|
|
51613
|
-
const start = parse(value, this.dateFormat, this.draft()().start);
|
|
51614
|
-
this.draft().update((appointment) => ({ ...appointment, start }));
|
|
52628
|
+
this.rangeValue = computed(() => ({
|
|
52629
|
+
start: format(this.draft()().start, this.dateFormat),
|
|
52630
|
+
end: format(this.draft()().end, this.dateFormat),
|
|
52631
|
+
}), /* @ts-ignore */
|
|
52632
|
+
...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
|
|
51615
52633
|
}
|
|
51616
|
-
|
|
51617
|
-
|
|
51618
|
-
|
|
51619
|
-
|
|
51620
|
-
|
|
51621
|
-
|
|
52634
|
+
updateRange(value) {
|
|
52635
|
+
this.draft().update((appointment) => ({
|
|
52636
|
+
...appointment,
|
|
52637
|
+
// a cleared side keeps the appointment's own timestamp - the surface has no empty state
|
|
52638
|
+
start: value.start === null ? appointment.start : parse(value.start, this.dateFormat, appointment.start),
|
|
52639
|
+
end: value.end === null ? appointment.end : parse(value.end, this.dateFormat, appointment.end),
|
|
52640
|
+
}));
|
|
51622
52641
|
}
|
|
51623
52642
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SchedulerEditTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51624
52643
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: SchedulerEditTimeRangeComponent, isStandalone: true, selector: "et-scheduler-edit-time-range", inputs: { draft: { classPropertyName: "draft", publicName: "draft", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-scheduler-edit-time-range" }, ngImport: i0, template: `
|
|
51625
52644
|
<et-form-field class="et-scheduler-edit-time-range-field">
|
|
51626
|
-
<et-label>{{
|
|
51627
|
-
<et-date-time-input
|
|
51628
|
-
|
|
51629
|
-
|
|
51630
|
-
|
|
51631
|
-
|
|
51632
|
-
|
|
52645
|
+
<et-label>{{ label() }}</et-label>
|
|
52646
|
+
<et-date-time-range-input
|
|
52647
|
+
[value]="rangeValue()"
|
|
52648
|
+
[startAriaLabel]="startLabel()"
|
|
52649
|
+
[endAriaLabel]="endLabel()"
|
|
52650
|
+
(valueChange)="updateRange($event)"
|
|
52651
|
+
/>
|
|
51633
52652
|
</et-form-field>
|
|
51634
|
-
`, isInline: true, dependencies: [{ kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type:
|
|
52653
|
+
`, isInline: true, dependencies: [{ kind: "component", type: FormFieldComponent, selector: "et-form-field", inputs: ["appearance", "fill", "labelMode", "size", "busy"] }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "component", type: DateTimeRangeInputComponent, selector: "et-date-time-range-input", inputs: ["startAriaLabel", "endAriaLabel", "pickerTriggerLabel", "dialogLabel", "minuteStep", "secondStep", "datesTabLabel", "timesTabLabel", "startTimeLabel", "endTimeLabel", "clearable", "clearLabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
51635
52654
|
}
|
|
51636
52655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SchedulerEditTimeRangeComponent, decorators: [{
|
|
51637
52656
|
type: Component,
|
|
@@ -51639,17 +52658,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
51639
52658
|
selector: 'et-scheduler-edit-time-range',
|
|
51640
52659
|
template: `
|
|
51641
52660
|
<et-form-field class="et-scheduler-edit-time-range-field">
|
|
51642
|
-
<et-label>{{
|
|
51643
|
-
<et-date-time-input
|
|
51644
|
-
|
|
51645
|
-
|
|
51646
|
-
|
|
51647
|
-
|
|
51648
|
-
|
|
52661
|
+
<et-label>{{ label() }}</et-label>
|
|
52662
|
+
<et-date-time-range-input
|
|
52663
|
+
[value]="rangeValue()"
|
|
52664
|
+
[startAriaLabel]="startLabel()"
|
|
52665
|
+
[endAriaLabel]="endLabel()"
|
|
52666
|
+
(valueChange)="updateRange($event)"
|
|
52667
|
+
/>
|
|
51649
52668
|
</et-form-field>
|
|
51650
52669
|
`,
|
|
51651
52670
|
encapsulation: ViewEncapsulation.None,
|
|
51652
|
-
imports: [...FORM_FIELD_IMPORTS, ...
|
|
52671
|
+
imports: [...FORM_FIELD_IMPORTS, ...DATE_TIME_RANGE_INPUT_IMPORTS],
|
|
51653
52672
|
host: {
|
|
51654
52673
|
class: 'et-scheduler-edit-time-range',
|
|
51655
52674
|
},
|
|
@@ -64288,11 +65307,11 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
|
|
|
64288
65307
|
|
|
64289
65308
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
64290
65309
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
64291
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
65310
|
+
const COMPONENTS_VERSION = '1.0.0-next.47';
|
|
64292
65311
|
|
|
64293
65312
|
/**
|
|
64294
65313
|
* Generated bundle index. Do not edit.
|
|
64295
65314
|
*/
|
|
64296
65315
|
|
|
64297
|
-
export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
|
|
65316
|
+
export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
|
|
64298
65317
|
//# sourceMappingURL=ethlete-components.mjs.map
|