@eagami/ui 5.2.2 → 5.3.0
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/fesm2022/eagami-ui.mjs +31 -17
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/tokens/_colors.scss +20 -10
- package/types/eagami-ui.d.ts +11 -2
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -245,12 +245,10 @@ function emitFamily(family, scale, roles, light, dark) {
|
|
|
245
245
|
dark[`${brandPrefix}-default`] = scale[roles.surfaceDark];
|
|
246
246
|
dark[`${brandPrefix}-hover`] = scale[roles.surfaceHoverDark];
|
|
247
247
|
dark[`${brandPrefix}-active`] = scale[roles.surfaceActiveDark];
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
light['--color-brand-muted'] = scale[roles.mutedLight];
|
|
253
|
-
}
|
|
248
|
+
light[`${brandPrefix}-text`] = scale[roles.textLight];
|
|
249
|
+
dark[`${brandPrefix}-text`] = scale[roles.textDark];
|
|
250
|
+
light[`${brandPrefix}-subtle`] = scale[roles.subtleLight];
|
|
251
|
+
light[`${brandPrefix}-muted`] = scale[roles.mutedLight];
|
|
254
252
|
}
|
|
255
253
|
function derivePalette(config) {
|
|
256
254
|
const light = {};
|
|
@@ -6955,6 +6953,8 @@ class ColorPickerComponent {
|
|
|
6955
6953
|
errorMessages = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
6956
6954
|
/** Whether to show the alpha slider. When `false` the emitted value always has alpha = 1. */
|
|
6957
6955
|
showAlpha = input(true, ...(ngDevMode ? [{ debugName: "showAlpha" }] : /* istanbul ignore next */ []));
|
|
6956
|
+
/** Whether to show the clear button when a value is set. */
|
|
6957
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
6958
6958
|
/** Output format. `all` lets the user cycle hex/rgb/hsl in the popover; a specific value locks it. */
|
|
6959
6959
|
format = input('all', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
6960
6960
|
/** Preset swatches shown at the bottom of the popover. Pass an empty array to hide. */
|
|
@@ -7491,13 +7491,13 @@ class ColorPickerComponent {
|
|
|
7491
7491
|
this.hexInputValue.set(this.hexDisplay());
|
|
7492
7492
|
}
|
|
7493
7493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ColorPickerComponent, isStandalone: true, selector: "ea-color-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
|
|
7494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ColorPickerComponent, isStandalone: true, selector: "ea-color-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
|
|
7495
7495
|
{
|
|
7496
7496
|
provide: NG_VALUE_ACCESSOR,
|
|
7497
7497
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
7498
7498
|
multi: true,
|
|
7499
7499
|
},
|
|
7500
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7500
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7501
7501
|
}
|
|
7502
7502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
7503
7503
|
type: Component,
|
|
@@ -7514,8 +7514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
7514
7514
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
7515
7515
|
multi: true,
|
|
7516
7516
|
},
|
|
7517
|
-
], template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
|
|
7518
|
-
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
7517
|
+
], template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
|
|
7518
|
+
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
7519
7519
|
function clamp01(n) {
|
|
7520
7520
|
return Math.min(1, Math.max(0, n));
|
|
7521
7521
|
}
|
|
@@ -8930,7 +8930,7 @@ class DatePickerComponent {
|
|
|
8930
8930
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
8931
8931
|
multi: true,
|
|
8932
8932
|
},
|
|
8933
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n role=\"gridcell\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8933
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n role=\"gridcell\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8934
8934
|
}
|
|
8935
8935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
8936
8936
|
type: Component,
|
|
@@ -8949,7 +8949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8949
8949
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
8950
8950
|
multi: true,
|
|
8951
8951
|
},
|
|
8952
|
-
], template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n role=\"gridcell\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
|
|
8952
|
+
], template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n role=\"gridcell\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
|
|
8953
8953
|
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
8954
8954
|
|
|
8955
8955
|
/**
|
|
@@ -12364,6 +12364,12 @@ class ProgressBarComponent {
|
|
|
12364
12364
|
/** Shows the rounded percentage alongside the label. */
|
|
12365
12365
|
showPercentage = input(false, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
12366
12366
|
indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
12367
|
+
/**
|
|
12368
|
+
* Optional buffered position ahead of `value` (same scale as `value`),
|
|
12369
|
+
* rendered as a secondary-colour segment behind the fill. Use for
|
|
12370
|
+
* download/upload-then-process style progress.
|
|
12371
|
+
*/
|
|
12372
|
+
buffer = input(undefined, ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
|
|
12367
12373
|
/** Whether to render the percentage. */
|
|
12368
12374
|
showsPercentage = computed(() => this.showPercentage(), ...(ngDevMode ? [{ debugName: "showsPercentage" }] : /* istanbul ignore next */ []));
|
|
12369
12375
|
percentage = computed(() => {
|
|
@@ -12374,18 +12380,26 @@ class ProgressBarComponent {
|
|
|
12374
12380
|
return Math.min(100, Math.max(0, (this.value() / max) * 100));
|
|
12375
12381
|
}, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
|
|
12376
12382
|
percentageRounded = computed(() => Math.round(this.percentage()), ...(ngDevMode ? [{ debugName: "percentageRounded" }] : /* istanbul ignore next */ []));
|
|
12383
|
+
bufferPercentage = computed(() => {
|
|
12384
|
+
const buffer = this.buffer();
|
|
12385
|
+
const max = this.max();
|
|
12386
|
+
if (buffer == null || max <= 0) {
|
|
12387
|
+
return null;
|
|
12388
|
+
}
|
|
12389
|
+
return Math.min(100, Math.max(0, (buffer / max) * 100));
|
|
12390
|
+
}, ...(ngDevMode ? [{ debugName: "bufferPercentage" }] : /* istanbul ignore next */ []));
|
|
12377
12391
|
hostClasses = computed(() => ({
|
|
12378
12392
|
[`ea-progress-bar--${this.variant()}`]: true,
|
|
12379
12393
|
[`ea-progress-bar--${this.size()}`]: true,
|
|
12380
12394
|
'ea-progress-bar--indeterminate': this.indeterminate(),
|
|
12381
12395
|
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
12382
12396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\"
|
|
12397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12384
12398
|
}
|
|
12385
12399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
12386
12400
|
type: Component,
|
|
12387
|
-
args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\"
|
|
12388
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
|
|
12401
|
+
args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
|
|
12402
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }] } });
|
|
12389
12403
|
|
|
12390
12404
|
/**
|
|
12391
12405
|
* Composite single-select control made up of `ea-radio` children. Manages
|
|
@@ -13655,11 +13669,11 @@ class StepperComponent {
|
|
|
13655
13669
|
return -1;
|
|
13656
13670
|
}
|
|
13657
13671
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-
|
|
13672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13659
13673
|
}
|
|
13660
13674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, decorators: [{
|
|
13661
13675
|
type: Component,
|
|
13662
|
-
args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-
|
|
13676
|
+
args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
|
|
13663
13677
|
}], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13664
13678
|
|
|
13665
13679
|
/**
|