@eagami/ui 5.69.0 → 5.70.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 +406 -53
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +130 -0
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -501,7 +501,10 @@ const ar = {
|
|
|
501
501
|
searchPlaceholder: "بحث…",
|
|
502
502
|
searchEmpty: "لا توجد مطابقات"
|
|
503
503
|
},
|
|
504
|
-
fieldLabel: {
|
|
504
|
+
fieldLabel: {
|
|
505
|
+
help: (label) => `مزيد من المعلومات حول ${label}`,
|
|
506
|
+
optional: "(اختياري)"
|
|
507
|
+
},
|
|
505
508
|
fileUploader: {
|
|
506
509
|
prompt: "انقر أو اسحب الملفات هنا للتحميل",
|
|
507
510
|
promptSingle: "انقر أو اسحب ملفًا هنا للتحميل",
|
|
@@ -725,7 +728,10 @@ const de = {
|
|
|
725
728
|
searchPlaceholder: "Suchen…",
|
|
726
729
|
searchEmpty: "Keine Treffer"
|
|
727
730
|
},
|
|
728
|
-
fieldLabel: {
|
|
731
|
+
fieldLabel: {
|
|
732
|
+
help: (label) => `Weitere Informationen zu ${label}`,
|
|
733
|
+
optional: "(optional)"
|
|
734
|
+
},
|
|
729
735
|
fileUploader: {
|
|
730
736
|
prompt: "Dateien hierher klicken oder ziehen zum Hochladen",
|
|
731
737
|
promptSingle: "Datei hierher klicken oder ziehen zum Hochladen",
|
|
@@ -949,7 +955,10 @@ const el = {
|
|
|
949
955
|
searchPlaceholder: "Αναζήτηση…",
|
|
950
956
|
searchEmpty: "Δεν βρέθηκαν αποτελέσματα"
|
|
951
957
|
},
|
|
952
|
-
fieldLabel: {
|
|
958
|
+
fieldLabel: {
|
|
959
|
+
help: (label) => `Περισσότερες πληροφορίες: ${label}`,
|
|
960
|
+
optional: "(προαιρετικό)"
|
|
961
|
+
},
|
|
953
962
|
fileUploader: {
|
|
954
963
|
prompt: "Κάντε κλικ ή σύρετε αρχεία εδώ για μεταφόρτωση",
|
|
955
964
|
promptSingle: "Κάντε κλικ ή σύρετε ένα αρχείο εδώ για μεταφόρτωση",
|
|
@@ -1173,7 +1182,10 @@ const en = {
|
|
|
1173
1182
|
searchPlaceholder: "Search…",
|
|
1174
1183
|
searchEmpty: "No matches"
|
|
1175
1184
|
},
|
|
1176
|
-
fieldLabel: {
|
|
1185
|
+
fieldLabel: {
|
|
1186
|
+
help: (label) => `More information about ${label}`,
|
|
1187
|
+
optional: "(optional)"
|
|
1188
|
+
},
|
|
1177
1189
|
fileUploader: {
|
|
1178
1190
|
prompt: "Click or drag files here to upload",
|
|
1179
1191
|
promptSingle: "Click or drag a file here to upload",
|
|
@@ -1397,7 +1409,10 @@ const esES = {
|
|
|
1397
1409
|
searchPlaceholder: "Buscar…",
|
|
1398
1410
|
searchEmpty: "Sin coincidencias"
|
|
1399
1411
|
},
|
|
1400
|
-
fieldLabel: {
|
|
1412
|
+
fieldLabel: {
|
|
1413
|
+
help: (label) => `Más información sobre ${label}`,
|
|
1414
|
+
optional: "(opcional)"
|
|
1415
|
+
},
|
|
1401
1416
|
fileUploader: {
|
|
1402
1417
|
prompt: "Haz clic o arrastra archivos aquí para subirlos",
|
|
1403
1418
|
promptSingle: "Haz clic o arrastra un archivo aquí para subirlo",
|
|
@@ -1621,7 +1636,10 @@ const frFR = {
|
|
|
1621
1636
|
searchPlaceholder: "Rechercher…",
|
|
1622
1637
|
searchEmpty: "Aucun résultat"
|
|
1623
1638
|
},
|
|
1624
|
-
fieldLabel: {
|
|
1639
|
+
fieldLabel: {
|
|
1640
|
+
help: (label) => `Plus d’informations sur ${label}`,
|
|
1641
|
+
optional: "(facultatif)"
|
|
1642
|
+
},
|
|
1625
1643
|
fileUploader: {
|
|
1626
1644
|
prompt: "Cliquez ou glissez des fichiers ici pour les téléverser",
|
|
1627
1645
|
promptSingle: "Cliquez ou glissez un fichier ici pour le téléverser",
|
|
@@ -1845,7 +1863,10 @@ const he = {
|
|
|
1845
1863
|
searchPlaceholder: "חיפוש…",
|
|
1846
1864
|
searchEmpty: "אין התאמות"
|
|
1847
1865
|
},
|
|
1848
|
-
fieldLabel: {
|
|
1866
|
+
fieldLabel: {
|
|
1867
|
+
help: (label) => `מידע נוסף על ${label}`,
|
|
1868
|
+
optional: "(אופציונלי)"
|
|
1869
|
+
},
|
|
1849
1870
|
fileUploader: {
|
|
1850
1871
|
prompt: "לחץ או גרור קבצים לכאן להעלאה",
|
|
1851
1872
|
promptSingle: "לחץ או גרור קובץ לכאן להעלאה",
|
|
@@ -2069,7 +2090,10 @@ const hi = {
|
|
|
2069
2090
|
searchPlaceholder: "खोजें…",
|
|
2070
2091
|
searchEmpty: "कोई मिलान नहीं"
|
|
2071
2092
|
},
|
|
2072
|
-
fieldLabel: {
|
|
2093
|
+
fieldLabel: {
|
|
2094
|
+
help: (label) => `अधिक जानकारी: ${label}`,
|
|
2095
|
+
optional: "(वैकल्पिक)"
|
|
2096
|
+
},
|
|
2073
2097
|
fileUploader: {
|
|
2074
2098
|
prompt: "अपलोड करने के लिए फ़ाइलें यहाँ क्लिक करें या खींचें",
|
|
2075
2099
|
promptSingle: "अपलोड करने के लिए फ़ाइल यहाँ क्लिक करें या खींचें",
|
|
@@ -2293,7 +2317,10 @@ const is = {
|
|
|
2293
2317
|
searchPlaceholder: "Leita…",
|
|
2294
2318
|
searchEmpty: "Engin samsvörun"
|
|
2295
2319
|
},
|
|
2296
|
-
fieldLabel: {
|
|
2320
|
+
fieldLabel: {
|
|
2321
|
+
help: (label) => `Nánari upplýsingar: ${label}`,
|
|
2322
|
+
optional: "(valfrjálst)"
|
|
2323
|
+
},
|
|
2297
2324
|
fileUploader: {
|
|
2298
2325
|
prompt: "Smelltu eða dragðu skrár hingað til að hlaða upp",
|
|
2299
2326
|
promptSingle: "Smelltu eða dragðu skrá hingað til að hlaða upp",
|
|
@@ -2517,7 +2544,10 @@ const nl = {
|
|
|
2517
2544
|
searchPlaceholder: "Zoeken…",
|
|
2518
2545
|
searchEmpty: "Geen overeenkomsten"
|
|
2519
2546
|
},
|
|
2520
|
-
fieldLabel: {
|
|
2547
|
+
fieldLabel: {
|
|
2548
|
+
help: (label) => `Meer informatie over ${label}`,
|
|
2549
|
+
optional: "(optioneel)"
|
|
2550
|
+
},
|
|
2521
2551
|
fileUploader: {
|
|
2522
2552
|
prompt: "Klik of sleep bestanden hierheen om te uploaden",
|
|
2523
2553
|
promptSingle: "Klik of sleep een bestand hierheen om te uploaden",
|
|
@@ -2741,7 +2771,10 @@ const pl = {
|
|
|
2741
2771
|
searchPlaceholder: "Szukaj…",
|
|
2742
2772
|
searchEmpty: "Brak wyników"
|
|
2743
2773
|
},
|
|
2744
|
-
fieldLabel: {
|
|
2774
|
+
fieldLabel: {
|
|
2775
|
+
help: (label) => `Więcej informacji: ${label}`,
|
|
2776
|
+
optional: "(opcjonalnie)"
|
|
2777
|
+
},
|
|
2745
2778
|
fileUploader: {
|
|
2746
2779
|
prompt: "Kliknij lub przeciągnij pliki tutaj, aby je przesłać",
|
|
2747
2780
|
promptSingle: "Kliknij lub przeciągnij plik tutaj, aby go przesłać",
|
|
@@ -2965,7 +2998,10 @@ const ptBR = {
|
|
|
2965
2998
|
searchPlaceholder: "Pesquisar…",
|
|
2966
2999
|
searchEmpty: "Nenhuma correspondência"
|
|
2967
3000
|
},
|
|
2968
|
-
fieldLabel: {
|
|
3001
|
+
fieldLabel: {
|
|
3002
|
+
help: (label) => `Mais informações sobre ${label}`,
|
|
3003
|
+
optional: "(opcional)"
|
|
3004
|
+
},
|
|
2969
3005
|
fileUploader: {
|
|
2970
3006
|
prompt: "Clique ou arraste arquivos aqui para enviar",
|
|
2971
3007
|
promptSingle: "Clique ou arraste um arquivo aqui para enviar",
|
|
@@ -3189,7 +3225,10 @@ const ru = {
|
|
|
3189
3225
|
searchPlaceholder: "Поиск…",
|
|
3190
3226
|
searchEmpty: "Нет совпадений"
|
|
3191
3227
|
},
|
|
3192
|
-
fieldLabel: {
|
|
3228
|
+
fieldLabel: {
|
|
3229
|
+
help: (label) => `Подробнее: ${label}`,
|
|
3230
|
+
optional: "(необязательно)"
|
|
3231
|
+
},
|
|
3193
3232
|
fileUploader: {
|
|
3194
3233
|
prompt: "Нажмите или перетащите файлы сюда для загрузки",
|
|
3195
3234
|
promptSingle: "Нажмите или перетащите файл сюда для загрузки",
|
|
@@ -3413,7 +3452,10 @@ const uk = {
|
|
|
3413
3452
|
searchPlaceholder: "Пошук…",
|
|
3414
3453
|
searchEmpty: "Немає збігів"
|
|
3415
3454
|
},
|
|
3416
|
-
fieldLabel: {
|
|
3455
|
+
fieldLabel: {
|
|
3456
|
+
help: (label) => `Докладніше: ${label}`,
|
|
3457
|
+
optional: "(необов’язково)"
|
|
3458
|
+
},
|
|
3417
3459
|
fileUploader: {
|
|
3418
3460
|
prompt: "Натисніть або перетягніть файли сюди для завантаження",
|
|
3419
3461
|
promptSingle: "Натисніть або перетягніть файл сюди для завантаження",
|
|
@@ -3637,7 +3679,10 @@ const zhCN = {
|
|
|
3637
3679
|
searchPlaceholder: "搜索…",
|
|
3638
3680
|
searchEmpty: "无匹配项"
|
|
3639
3681
|
},
|
|
3640
|
-
fieldLabel: {
|
|
3682
|
+
fieldLabel: {
|
|
3683
|
+
help: (label) => `关于 ${label} 的更多信息`,
|
|
3684
|
+
optional: "（可选）"
|
|
3685
|
+
},
|
|
3641
3686
|
fileUploader: {
|
|
3642
3687
|
prompt: "点击或拖动文件到此处上传",
|
|
3643
3688
|
promptSingle: "点击或拖动文件到此处上传",
|
|
@@ -5114,6 +5159,7 @@ var FieldLabelComponent = class FieldLabelComponent {
|
|
|
5114
5159
|
help = input(void 0, ...ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []);
|
|
5115
5160
|
forId = input(void 0, ...ngDevMode ? [{ debugName: "forId" }] : /* istanbul ignore next */ []);
|
|
5116
5161
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
5162
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
5117
5163
|
labelId = input(void 0, ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
|
|
5118
5164
|
helpOpen = linkedSignal({
|
|
5119
5165
|
...ngDevMode ? { debugName: "helpOpen" } : /* istanbul ignore next */ {},
|
|
@@ -5126,6 +5172,8 @@ var FieldLabelComponent = class FieldLabelComponent {
|
|
|
5126
5172
|
return help instanceof TemplateRef ? help : null;
|
|
5127
5173
|
}, ...ngDevMode ? [{ debugName: "helpTemplate" }] : /* istanbul ignore next */ []);
|
|
5128
5174
|
helpTriggerLabel = computed(() => this.i18n.messages().fieldLabel.help(this.text()), ...ngDevMode ? [{ debugName: "helpTriggerLabel" }] : /* istanbul ignore next */ []);
|
|
5175
|
+
showOptional = computed(() => this.optional() && !this.required(), ...ngDevMode ? [{ debugName: "showOptional" }] : /* istanbul ignore next */ []);
|
|
5176
|
+
optionalText = computed(() => this.i18n.messages().fieldLabel.optional, ...ngDevMode ? [{ debugName: "optionalText" }] : /* istanbul ignore next */ []);
|
|
5129
5177
|
helpEl = viewChild("helpEl", ...ngDevMode ? [{ debugName: "helpEl" }] : /* istanbul ignore next */ []);
|
|
5130
5178
|
helpTrigger = viewChild("helpTrigger", ...ngDevMode ? [{ debugName: "helpTrigger" }] : /* istanbul ignore next */ []);
|
|
5131
5179
|
helpBubble = viewChild("helpBubble", ...ngDevMode ? [{ debugName: "helpBubble" }] : /* istanbul ignore next */ []);
|
|
@@ -5244,6 +5292,13 @@ var FieldLabelComponent = class FieldLabelComponent {
|
|
|
5244
5292
|
isRequired: false,
|
|
5245
5293
|
transformFunction: null
|
|
5246
5294
|
},
|
|
5295
|
+
optional: {
|
|
5296
|
+
classPropertyName: "optional",
|
|
5297
|
+
publicName: "optional",
|
|
5298
|
+
isSignal: true,
|
|
5299
|
+
isRequired: false,
|
|
5300
|
+
transformFunction: null
|
|
5301
|
+
},
|
|
5247
5302
|
labelId: {
|
|
5248
5303
|
classPropertyName: "labelId",
|
|
5249
5304
|
publicName: "labelId",
|
|
@@ -5276,8 +5331,8 @@ var FieldLabelComponent = class FieldLabelComponent {
|
|
|
5276
5331
|
}
|
|
5277
5332
|
],
|
|
5278
5333
|
ngImport: i0,
|
|
5279
|
-
template: "@if (help(); as helpContent) {\n <span class=\"ea-field-label-row\">\n <ng-container [ngTemplateOutlet]=\"label\" />\n <span\n #helpEl\n class=\"ea-field-label__help\"\n (focusout)=\"onHelpFocusout($event)\">\n <button\n #helpTrigger\n type=\"button\"\n class=\"ea-field-label__help-trigger\"\n [attr.aria-label]=\"helpTriggerLabel()\"\n [attr.aria-expanded]=\"helpOpen()\"\n [attr.aria-controls]=\"helpId\"\n (click)=\"toggleHelp()\">\n <ea-icon-info />\n </button>\n <span\n role=\"status\"\n [id]=\"helpId\">\n @if (helpOpen()) {\n <span\n #helpBubble\n class=\"ea-field-label__help-bubble\"\n popover=\"manual\">\n @if (helpTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n {{ helpContent }}\n }\n </span>\n }\n </span>\n </span>\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n @if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </label>\n } @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </span>\n }\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-field-label__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n {{ text() }}\n</ng-template>\n",
|
|
5280
|
-
styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{color:var(--color-error-text);content:\" *\"}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;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-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"],
|
|
5334
|
+
template: "@if (help(); as helpContent) {\n <span class=\"ea-field-label-row\">\n <ng-container [ngTemplateOutlet]=\"label\" />\n <span\n #helpEl\n class=\"ea-field-label__help\"\n (focusout)=\"onHelpFocusout($event)\">\n <button\n #helpTrigger\n type=\"button\"\n class=\"ea-field-label__help-trigger\"\n [attr.aria-label]=\"helpTriggerLabel()\"\n [attr.aria-expanded]=\"helpOpen()\"\n [attr.aria-controls]=\"helpId\"\n (click)=\"toggleHelp()\">\n <ea-icon-info />\n </button>\n <span\n role=\"status\"\n [id]=\"helpId\">\n @if (helpOpen()) {\n <span\n #helpBubble\n class=\"ea-field-label__help-bubble\"\n popover=\"manual\">\n @if (helpTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n {{ helpContent }}\n }\n </span>\n }\n </span>\n </span>\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n @if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </label>\n } @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </span>\n }\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-field-label__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n {{ text() }}\n @if (showOptional()) {\n <span class=\"ea-field-label__optional\">{{ optionalText() }}</span>\n }\n</ng-template>\n",
|
|
5335
|
+
styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{color:var(--color-error-text);content:\" *\"}.ea-field-label__optional{font-weight:var(--font-weight-regular);color:var(--color-text-secondary)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;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-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"],
|
|
5281
5336
|
dependencies: [
|
|
5282
5337
|
{
|
|
5283
5338
|
kind: "component",
|
|
@@ -5327,8 +5382,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5327
5382
|
NgComponentOutlet,
|
|
5328
5383
|
NgTemplateOutlet
|
|
5329
5384
|
],
|
|
5330
|
-
template: "@if (help(); as helpContent) {\n <span class=\"ea-field-label-row\">\n <ng-container [ngTemplateOutlet]=\"label\" />\n <span\n #helpEl\n class=\"ea-field-label__help\"\n (focusout)=\"onHelpFocusout($event)\">\n <button\n #helpTrigger\n type=\"button\"\n class=\"ea-field-label__help-trigger\"\n [attr.aria-label]=\"helpTriggerLabel()\"\n [attr.aria-expanded]=\"helpOpen()\"\n [attr.aria-controls]=\"helpId\"\n (click)=\"toggleHelp()\">\n <ea-icon-info />\n </button>\n <span\n role=\"status\"\n [id]=\"helpId\">\n @if (helpOpen()) {\n <span\n #helpBubble\n class=\"ea-field-label__help-bubble\"\n popover=\"manual\">\n @if (helpTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n {{ helpContent }}\n }\n </span>\n }\n </span>\n </span>\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n @if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </label>\n } @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </span>\n }\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-field-label__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n {{ text() }}\n</ng-template>\n",
|
|
5331
|
-
styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{color:var(--color-error-text);content:\" *\"}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;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-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"]
|
|
5385
|
+
template: "@if (help(); as helpContent) {\n <span class=\"ea-field-label-row\">\n <ng-container [ngTemplateOutlet]=\"label\" />\n <span\n #helpEl\n class=\"ea-field-label__help\"\n (focusout)=\"onHelpFocusout($event)\">\n <button\n #helpTrigger\n type=\"button\"\n class=\"ea-field-label__help-trigger\"\n [attr.aria-label]=\"helpTriggerLabel()\"\n [attr.aria-expanded]=\"helpOpen()\"\n [attr.aria-controls]=\"helpId\"\n (click)=\"toggleHelp()\">\n <ea-icon-info />\n </button>\n <span\n role=\"status\"\n [id]=\"helpId\">\n @if (helpOpen()) {\n <span\n #helpBubble\n class=\"ea-field-label__help-bubble\"\n popover=\"manual\">\n @if (helpTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n {{ helpContent }}\n }\n </span>\n }\n </span>\n </span>\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n @if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </label>\n } @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n <ng-container [ngTemplateOutlet]=\"content\" />\n </span>\n }\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-field-label__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n {{ text() }}\n @if (showOptional()) {\n <span class=\"ea-field-label__optional\">{{ optionalText() }}</span>\n }\n</ng-template>\n",
|
|
5386
|
+
styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{color:var(--color-error-text);content:\" *\"}.ea-field-label__optional{font-weight:var(--font-weight-regular);color:var(--color-text-secondary)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;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-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"]
|
|
5332
5387
|
}]
|
|
5333
5388
|
}],
|
|
5334
5389
|
ctorParameters: () => [],
|
|
@@ -5373,6 +5428,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5373
5428
|
required: false
|
|
5374
5429
|
}]
|
|
5375
5430
|
}],
|
|
5431
|
+
optional: [{
|
|
5432
|
+
type: i0.Input,
|
|
5433
|
+
args: [{
|
|
5434
|
+
isSignal: true,
|
|
5435
|
+
alias: "optional",
|
|
5436
|
+
required: false
|
|
5437
|
+
}]
|
|
5438
|
+
}],
|
|
5376
5439
|
labelId: [{
|
|
5377
5440
|
type: i0.Input,
|
|
5378
5441
|
args: [{
|
|
@@ -6333,6 +6396,7 @@ var AutocompleteComponent = class AutocompleteComponent {
|
|
|
6333
6396
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
6334
6397
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
6335
6398
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
6399
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
6336
6400
|
ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
6337
6401
|
placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
6338
6402
|
options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
@@ -6514,6 +6578,13 @@ var AutocompleteComponent = class AutocompleteComponent {
|
|
|
6514
6578
|
isRequired: false,
|
|
6515
6579
|
transformFunction: null
|
|
6516
6580
|
},
|
|
6581
|
+
optional: {
|
|
6582
|
+
classPropertyName: "optional",
|
|
6583
|
+
publicName: "optional",
|
|
6584
|
+
isSignal: true,
|
|
6585
|
+
isRequired: false,
|
|
6586
|
+
transformFunction: null
|
|
6587
|
+
},
|
|
6517
6588
|
ariaLabel: {
|
|
6518
6589
|
classPropertyName: "ariaLabel",
|
|
6519
6590
|
publicName: "ariaLabel",
|
|
@@ -6647,7 +6718,7 @@ var AutocompleteComponent = class AutocompleteComponent {
|
|
|
6647
6718
|
isSignal: true
|
|
6648
6719
|
}],
|
|
6649
6720
|
ngImport: i0,
|
|
6650
|
-
template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
6721
|
+
template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
6651
6722
|
styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"],
|
|
6652
6723
|
dependencies: [
|
|
6653
6724
|
{
|
|
@@ -6660,6 +6731,7 @@ var AutocompleteComponent = class AutocompleteComponent {
|
|
|
6660
6731
|
"help",
|
|
6661
6732
|
"forId",
|
|
6662
6733
|
"required",
|
|
6734
|
+
"optional",
|
|
6663
6735
|
"labelId"
|
|
6664
6736
|
]
|
|
6665
6737
|
},
|
|
@@ -6730,7 +6802,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6730
6802
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
6731
6803
|
multi: true
|
|
6732
6804
|
}],
|
|
6733
|
-
template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
6805
|
+
template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
6734
6806
|
styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"]
|
|
6735
6807
|
}]
|
|
6736
6808
|
}],
|
|
@@ -6763,6 +6835,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6763
6835
|
required: false
|
|
6764
6836
|
}]
|
|
6765
6837
|
}],
|
|
6838
|
+
optional: [{
|
|
6839
|
+
type: i0.Input,
|
|
6840
|
+
args: [{
|
|
6841
|
+
isSignal: true,
|
|
6842
|
+
alias: "optional",
|
|
6843
|
+
required: false
|
|
6844
|
+
}]
|
|
6845
|
+
}],
|
|
6766
6846
|
ariaLabel: [{
|
|
6767
6847
|
type: i0.Input,
|
|
6768
6848
|
args: [{
|
|
@@ -12193,6 +12273,7 @@ var InputComponent = class InputComponent {
|
|
|
12193
12273
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
12194
12274
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
12195
12275
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
12276
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
12196
12277
|
ariaLabel = input(void 0, {
|
|
12197
12278
|
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
12198
12279
|
alias: "aria-label"
|
|
@@ -12390,6 +12471,13 @@ var InputComponent = class InputComponent {
|
|
|
12390
12471
|
isRequired: false,
|
|
12391
12472
|
transformFunction: null
|
|
12392
12473
|
},
|
|
12474
|
+
optional: {
|
|
12475
|
+
classPropertyName: "optional",
|
|
12476
|
+
publicName: "optional",
|
|
12477
|
+
isSignal: true,
|
|
12478
|
+
isRequired: false,
|
|
12479
|
+
transformFunction: null
|
|
12480
|
+
},
|
|
12393
12481
|
ariaLabel: {
|
|
12394
12482
|
classPropertyName: "ariaLabel",
|
|
12395
12483
|
publicName: "aria-label",
|
|
@@ -12619,7 +12707,7 @@ var InputComponent = class InputComponent {
|
|
|
12619
12707
|
isSignal: true
|
|
12620
12708
|
}],
|
|
12621
12709
|
ngImport: i0,
|
|
12622
|
-
template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.max-width]=\"numberWidth()\">\n @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n <span\n class=\"ea-input-wrapper__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [type]=\"effectiveType()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.spellcheck]=\"spellcheck() ?? null\"\n [attr.list]=\"list() ?? null\"\n [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__clear\"\n [attr.aria-label]=\"i18n.messages().input.clear\"\n (mousedown)=\"onClearMousedown($event)\"\n (click)=\"clear()\">\n <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n </button>\n }\n\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"\n passwordVisible()\n ? i18n.messages().input.hidePassword\n : i18n.messages().input.showPassword\n \"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
12710
|
+
template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.max-width]=\"numberWidth()\">\n @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n <span\n class=\"ea-input-wrapper__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [type]=\"effectiveType()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.spellcheck]=\"spellcheck() ?? null\"\n [attr.list]=\"list() ?? null\"\n [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__clear\"\n [attr.aria-label]=\"i18n.messages().input.clear\"\n (mousedown)=\"onClearMousedown($event)\"\n (click)=\"clear()\">\n <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n </button>\n }\n\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"\n passwordVisible()\n ? i18n.messages().input.hidePassword\n : i18n.messages().input.showPassword\n \"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
12623
12711
|
styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"],
|
|
12624
12712
|
dependencies: [
|
|
12625
12713
|
{
|
|
@@ -12642,6 +12730,7 @@ var InputComponent = class InputComponent {
|
|
|
12642
12730
|
"help",
|
|
12643
12731
|
"forId",
|
|
12644
12732
|
"required",
|
|
12733
|
+
"optional",
|
|
12645
12734
|
"labelId"
|
|
12646
12735
|
]
|
|
12647
12736
|
},
|
|
@@ -12708,7 +12797,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12708
12797
|
useExisting: forwardRef(() => InputComponent),
|
|
12709
12798
|
multi: true
|
|
12710
12799
|
}],
|
|
12711
|
-
template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.max-width]=\"numberWidth()\">\n @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n <span\n class=\"ea-input-wrapper__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [type]=\"effectiveType()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.spellcheck]=\"spellcheck() ?? null\"\n [attr.list]=\"list() ?? null\"\n [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__clear\"\n [attr.aria-label]=\"i18n.messages().input.clear\"\n (mousedown)=\"onClearMousedown($event)\"\n (click)=\"clear()\">\n <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n </button>\n }\n\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"\n passwordVisible()\n ? i18n.messages().input.hidePassword\n : i18n.messages().input.showPassword\n \"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
12800
|
+
template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.max-width]=\"numberWidth()\">\n @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n <span\n class=\"ea-input-wrapper__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"leadingIcon\" />\n </span>\n }\n\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [type]=\"effectiveType()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.spellcheck]=\"spellcheck() ?? null\"\n [attr.list]=\"list() ?? null\"\n [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__clear\"\n [attr.aria-label]=\"i18n.messages().input.clear\"\n (mousedown)=\"onClearMousedown($event)\"\n (click)=\"clear()\">\n <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n </button>\n }\n\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"\n passwordVisible()\n ? i18n.messages().input.hidePassword\n : i18n.messages().input.showPassword\n \"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
12712
12801
|
styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"]
|
|
12713
12802
|
}]
|
|
12714
12803
|
}],
|
|
@@ -12742,6 +12831,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12742
12831
|
required: false
|
|
12743
12832
|
}]
|
|
12744
12833
|
}],
|
|
12834
|
+
optional: [{
|
|
12835
|
+
type: i0.Input,
|
|
12836
|
+
args: [{
|
|
12837
|
+
isSignal: true,
|
|
12838
|
+
alias: "optional",
|
|
12839
|
+
required: false
|
|
12840
|
+
}]
|
|
12841
|
+
}],
|
|
12745
12842
|
ariaLabel: [{
|
|
12746
12843
|
type: i0.Input,
|
|
12747
12844
|
args: [{
|
|
@@ -13277,6 +13374,7 @@ var CommandPaletteComponent = class CommandPaletteComponent {
|
|
|
13277
13374
|
"label",
|
|
13278
13375
|
"labelIcon",
|
|
13279
13376
|
"labelHelp",
|
|
13377
|
+
"optional",
|
|
13280
13378
|
"aria-label",
|
|
13281
13379
|
"role",
|
|
13282
13380
|
"aria-expanded",
|
|
@@ -13509,6 +13607,7 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
13509
13607
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
13510
13608
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
13511
13609
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
13610
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
13512
13611
|
placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
13513
13612
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
13514
13613
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
@@ -13975,6 +14074,13 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
13975
14074
|
isRequired: false,
|
|
13976
14075
|
transformFunction: null
|
|
13977
14076
|
},
|
|
14077
|
+
optional: {
|
|
14078
|
+
classPropertyName: "optional",
|
|
14079
|
+
publicName: "optional",
|
|
14080
|
+
isSignal: true,
|
|
14081
|
+
isRequired: false,
|
|
14082
|
+
transformFunction: null
|
|
14083
|
+
},
|
|
13978
14084
|
placeholder: {
|
|
13979
14085
|
classPropertyName: "placeholder",
|
|
13980
14086
|
publicName: "placeholder",
|
|
@@ -14121,7 +14227,7 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
14121
14227
|
}
|
|
14122
14228
|
],
|
|
14123
14229
|
ngImport: i0,
|
|
14124
|
-
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\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 }\n </button>\n @if (clearable() && !compact() && 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 [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\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.--_ea-swatch-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]=\"activePresets().has(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",
|
|
14230
|
+
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\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.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\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 }\n </button>\n @if (clearable() && !compact() && 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 [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\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.--_ea-swatch-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]=\"activePresets().has(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",
|
|
14125
14231
|
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.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:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;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__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);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.875em;height:.875em;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:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.875em;height:.875em;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:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.625em;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:.375em .5em;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:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.5em;padding:.375em .75em;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:.75em;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;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:.25em}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"],
|
|
14126
14232
|
dependencies: [
|
|
14127
14233
|
{
|
|
@@ -14139,6 +14245,7 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
14139
14245
|
"help",
|
|
14140
14246
|
"forId",
|
|
14141
14247
|
"required",
|
|
14248
|
+
"optional",
|
|
14142
14249
|
"labelId"
|
|
14143
14250
|
]
|
|
14144
14251
|
},
|
|
@@ -14216,7 +14323,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
14216
14323
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
14217
14324
|
multi: true
|
|
14218
14325
|
}],
|
|
14219
|
-
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\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 }\n </button>\n @if (clearable() && !compact() && 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 [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\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.--_ea-swatch-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]=\"activePresets().has(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",
|
|
14326
|
+
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\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.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\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 }\n </button>\n @if (clearable() && !compact() && 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 [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\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.--_ea-swatch-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]=\"activePresets().has(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",
|
|
14220
14327
|
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.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:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;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__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);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.875em;height:.875em;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:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.875em;height:.875em;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:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.625em;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:.375em .5em;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:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.5em;padding:.375em .75em;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:.75em;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;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:.25em}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"]
|
|
14221
14328
|
}]
|
|
14222
14329
|
}],
|
|
@@ -14261,6 +14368,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
14261
14368
|
required: false
|
|
14262
14369
|
}]
|
|
14263
14370
|
}],
|
|
14371
|
+
optional: [{
|
|
14372
|
+
type: i0.Input,
|
|
14373
|
+
args: [{
|
|
14374
|
+
isSignal: true,
|
|
14375
|
+
alias: "optional",
|
|
14376
|
+
required: false
|
|
14377
|
+
}]
|
|
14378
|
+
}],
|
|
14264
14379
|
placeholder: [{
|
|
14265
14380
|
type: i0.Input,
|
|
14266
14381
|
args: [{
|
|
@@ -15971,6 +16086,7 @@ var CodeInputComponent = class CodeInputComponent {
|
|
|
15971
16086
|
});
|
|
15972
16087
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
15973
16088
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
16089
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
15974
16090
|
placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
15975
16091
|
length = input(6, ...ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []);
|
|
15976
16092
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
@@ -16128,6 +16244,13 @@ var CodeInputComponent = class CodeInputComponent {
|
|
|
16128
16244
|
isRequired: false,
|
|
16129
16245
|
transformFunction: null
|
|
16130
16246
|
},
|
|
16247
|
+
optional: {
|
|
16248
|
+
classPropertyName: "optional",
|
|
16249
|
+
publicName: "optional",
|
|
16250
|
+
isSignal: true,
|
|
16251
|
+
isRequired: false,
|
|
16252
|
+
transformFunction: null
|
|
16253
|
+
},
|
|
16131
16254
|
placeholder: {
|
|
16132
16255
|
classPropertyName: "placeholder",
|
|
16133
16256
|
publicName: "placeholder",
|
|
@@ -16230,7 +16353,7 @@ var CodeInputComponent = class CodeInputComponent {
|
|
|
16230
16353
|
isSignal: true
|
|
16231
16354
|
}],
|
|
16232
16355
|
ngImport: i0,
|
|
16233
|
-
template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
16356
|
+
template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
16234
16357
|
styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"],
|
|
16235
16358
|
dependencies: [{
|
|
16236
16359
|
kind: "component",
|
|
@@ -16242,6 +16365,7 @@ var CodeInputComponent = class CodeInputComponent {
|
|
|
16242
16365
|
"help",
|
|
16243
16366
|
"forId",
|
|
16244
16367
|
"required",
|
|
16368
|
+
"optional",
|
|
16245
16369
|
"labelId"
|
|
16246
16370
|
]
|
|
16247
16371
|
}, {
|
|
@@ -16274,7 +16398,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
16274
16398
|
useExisting: forwardRef(() => CodeInputComponent),
|
|
16275
16399
|
multi: true
|
|
16276
16400
|
}],
|
|
16277
|
-
template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
16401
|
+
template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
16278
16402
|
styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
|
|
16279
16403
|
}]
|
|
16280
16404
|
}],
|
|
@@ -16315,6 +16439,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
16315
16439
|
required: false
|
|
16316
16440
|
}]
|
|
16317
16441
|
}],
|
|
16442
|
+
optional: [{
|
|
16443
|
+
type: i0.Input,
|
|
16444
|
+
args: [{
|
|
16445
|
+
isSignal: true,
|
|
16446
|
+
alias: "optional",
|
|
16447
|
+
required: false
|
|
16448
|
+
}]
|
|
16449
|
+
}],
|
|
16318
16450
|
placeholder: [{
|
|
16319
16451
|
type: i0.Input,
|
|
16320
16452
|
args: [{
|
|
@@ -16733,6 +16865,7 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
16733
16865
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
16734
16866
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
16735
16867
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
16868
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
16736
16869
|
placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
16737
16870
|
ariaLabelledby = input(void 0, {
|
|
16738
16871
|
...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
|
|
@@ -17150,6 +17283,13 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
17150
17283
|
isRequired: false,
|
|
17151
17284
|
transformFunction: null
|
|
17152
17285
|
},
|
|
17286
|
+
optional: {
|
|
17287
|
+
classPropertyName: "optional",
|
|
17288
|
+
publicName: "optional",
|
|
17289
|
+
isSignal: true,
|
|
17290
|
+
isRequired: false,
|
|
17291
|
+
transformFunction: null
|
|
17292
|
+
},
|
|
17153
17293
|
placeholder: {
|
|
17154
17294
|
classPropertyName: "placeholder",
|
|
17155
17295
|
publicName: "placeholder",
|
|
@@ -17301,7 +17441,7 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
17301
17441
|
isSignal: true
|
|
17302
17442
|
}],
|
|
17303
17443
|
ngImport: i0,
|
|
17304
|
-
template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\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]=\"fieldEl\"\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 <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\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-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\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",
|
|
17444
|
+
template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\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]=\"fieldEl\"\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 <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\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-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\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",
|
|
17305
17445
|
styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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__cell{display:flex;justify-content:center}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
|
|
17306
17446
|
dependencies: [
|
|
17307
17447
|
{
|
|
@@ -17329,6 +17469,7 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
17329
17469
|
"help",
|
|
17330
17470
|
"forId",
|
|
17331
17471
|
"required",
|
|
17472
|
+
"optional",
|
|
17332
17473
|
"labelId"
|
|
17333
17474
|
]
|
|
17334
17475
|
},
|
|
@@ -17409,7 +17550,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
17409
17550
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
17410
17551
|
multi: true
|
|
17411
17552
|
}],
|
|
17412
|
-
template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\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]=\"fieldEl\"\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 <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\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-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\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",
|
|
17553
|
+
template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\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]=\"fieldEl\"\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 <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\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-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\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",
|
|
17413
17554
|
styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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__cell{display:flex;justify-content:center}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
|
|
17414
17555
|
}]
|
|
17415
17556
|
}],
|
|
@@ -17446,6 +17587,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
17446
17587
|
required: false
|
|
17447
17588
|
}]
|
|
17448
17589
|
}],
|
|
17590
|
+
optional: [{
|
|
17591
|
+
type: i0.Input,
|
|
17592
|
+
args: [{
|
|
17593
|
+
isSignal: true,
|
|
17594
|
+
alias: "optional",
|
|
17595
|
+
required: false
|
|
17596
|
+
}]
|
|
17597
|
+
}],
|
|
17449
17598
|
placeholder: [{
|
|
17450
17599
|
type: i0.Input,
|
|
17451
17600
|
args: [{
|
|
@@ -18686,6 +18835,7 @@ var DropdownComponent = class DropdownComponent {
|
|
|
18686
18835
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
18687
18836
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
18688
18837
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
18838
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
18689
18839
|
placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
18690
18840
|
options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
18691
18841
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
@@ -18954,6 +19104,13 @@ var DropdownComponent = class DropdownComponent {
|
|
|
18954
19104
|
isRequired: false,
|
|
18955
19105
|
transformFunction: null
|
|
18956
19106
|
},
|
|
19107
|
+
optional: {
|
|
19108
|
+
classPropertyName: "optional",
|
|
19109
|
+
publicName: "optional",
|
|
19110
|
+
isSignal: true,
|
|
19111
|
+
isRequired: false,
|
|
19112
|
+
transformFunction: null
|
|
19113
|
+
},
|
|
18957
19114
|
placeholder: {
|
|
18958
19115
|
classPropertyName: "placeholder",
|
|
18959
19116
|
publicName: "placeholder",
|
|
@@ -19079,7 +19236,7 @@ var DropdownComponent = class DropdownComponent {
|
|
|
19079
19236
|
}
|
|
19080
19237
|
],
|
|
19081
19238
|
ngImport: i0,
|
|
19082
|
-
template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.searchEmpty }}\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",
|
|
19239
|
+
template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.searchEmpty }}\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",
|
|
19083
19240
|
styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;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-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
|
|
19084
19241
|
dependencies: [
|
|
19085
19242
|
{
|
|
@@ -19097,6 +19254,7 @@ var DropdownComponent = class DropdownComponent {
|
|
|
19097
19254
|
"help",
|
|
19098
19255
|
"forId",
|
|
19099
19256
|
"required",
|
|
19257
|
+
"optional",
|
|
19100
19258
|
"labelId"
|
|
19101
19259
|
]
|
|
19102
19260
|
},
|
|
@@ -19180,7 +19338,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19180
19338
|
useExisting: forwardRef(() => DropdownComponent),
|
|
19181
19339
|
multi: true
|
|
19182
19340
|
}],
|
|
19183
|
-
template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.searchEmpty }}\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",
|
|
19341
|
+
template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.searchEmpty }}\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",
|
|
19184
19342
|
styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;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-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
|
|
19185
19343
|
}]
|
|
19186
19344
|
}],
|
|
@@ -19222,6 +19380,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19222
19380
|
required: false
|
|
19223
19381
|
}]
|
|
19224
19382
|
}],
|
|
19383
|
+
optional: [{
|
|
19384
|
+
type: i0.Input,
|
|
19385
|
+
args: [{
|
|
19386
|
+
isSignal: true,
|
|
19387
|
+
alias: "optional",
|
|
19388
|
+
required: false
|
|
19389
|
+
}]
|
|
19390
|
+
}],
|
|
19225
19391
|
placeholder: [{
|
|
19226
19392
|
type: i0.Input,
|
|
19227
19393
|
args: [{
|
|
@@ -20087,6 +20253,7 @@ var FormFieldComponent = class FormFieldComponent {
|
|
|
20087
20253
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
20088
20254
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
20089
20255
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
20256
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
20090
20257
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
20091
20258
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
20092
20259
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -20167,6 +20334,13 @@ var FormFieldComponent = class FormFieldComponent {
|
|
|
20167
20334
|
isRequired: false,
|
|
20168
20335
|
transformFunction: null
|
|
20169
20336
|
},
|
|
20337
|
+
optional: {
|
|
20338
|
+
classPropertyName: "optional",
|
|
20339
|
+
publicName: "optional",
|
|
20340
|
+
isSignal: true,
|
|
20341
|
+
isRequired: false,
|
|
20342
|
+
transformFunction: null
|
|
20343
|
+
},
|
|
20170
20344
|
hint: {
|
|
20171
20345
|
classPropertyName: "hint",
|
|
20172
20346
|
publicName: "hint",
|
|
@@ -20218,7 +20392,7 @@ var FormFieldComponent = class FormFieldComponent {
|
|
|
20218
20392
|
isSignal: true
|
|
20219
20393
|
}],
|
|
20220
20394
|
ngImport: i0,
|
|
20221
|
-
template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
20395
|
+
template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"controlId()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
20222
20396
|
styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--2xs{font-size:var(--font-size-2xs)}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"],
|
|
20223
20397
|
dependencies: [{
|
|
20224
20398
|
kind: "component",
|
|
@@ -20230,6 +20404,7 @@ var FormFieldComponent = class FormFieldComponent {
|
|
|
20230
20404
|
"help",
|
|
20231
20405
|
"forId",
|
|
20232
20406
|
"required",
|
|
20407
|
+
"optional",
|
|
20233
20408
|
"labelId"
|
|
20234
20409
|
]
|
|
20235
20410
|
}, {
|
|
@@ -20258,7 +20433,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20258
20433
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
20259
20434
|
encapsulation: ViewEncapsulation.None,
|
|
20260
20435
|
imports: [FieldLabelComponent, FieldMessagesComponent],
|
|
20261
|
-
template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
20436
|
+
template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"controlId()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
20262
20437
|
styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--2xs{font-size:var(--font-size-2xs)}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"]
|
|
20263
20438
|
}]
|
|
20264
20439
|
}],
|
|
@@ -20288,6 +20463,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20288
20463
|
required: false
|
|
20289
20464
|
}]
|
|
20290
20465
|
}],
|
|
20466
|
+
optional: [{
|
|
20467
|
+
type: i0.Input,
|
|
20468
|
+
args: [{
|
|
20469
|
+
isSignal: true,
|
|
20470
|
+
alias: "optional",
|
|
20471
|
+
required: false
|
|
20472
|
+
}]
|
|
20473
|
+
}],
|
|
20291
20474
|
hint: [{
|
|
20292
20475
|
type: i0.Input,
|
|
20293
20476
|
args: [{
|
|
@@ -21077,6 +21260,7 @@ var FileUploaderComponent = class FileUploaderComponent {
|
|
|
21077
21260
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
21078
21261
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
21079
21262
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
21263
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
21080
21264
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
21081
21265
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
21082
21266
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -21333,6 +21517,13 @@ var FileUploaderComponent = class FileUploaderComponent {
|
|
|
21333
21517
|
isRequired: false,
|
|
21334
21518
|
transformFunction: null
|
|
21335
21519
|
},
|
|
21520
|
+
optional: {
|
|
21521
|
+
classPropertyName: "optional",
|
|
21522
|
+
publicName: "optional",
|
|
21523
|
+
isSignal: true,
|
|
21524
|
+
isRequired: false,
|
|
21525
|
+
transformFunction: null
|
|
21526
|
+
},
|
|
21336
21527
|
hint: {
|
|
21337
21528
|
classPropertyName: "hint",
|
|
21338
21529
|
publicName: "hint",
|
|
@@ -21502,7 +21693,7 @@ var FileUploaderComponent = class FileUploaderComponent {
|
|
|
21502
21693
|
}
|
|
21503
21694
|
],
|
|
21504
21695
|
ngImport: i0,
|
|
21505
|
-
template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"labelId()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onFileSelected($event)\" />\n\n @if (variant() === 'button') {\n <ea-button\n class=\"ea-file-uploader-field__button\"\n variant=\"secondary\"\n [size]=\"size()\"\n [icon]=\"buttonIcon()\"\n [disabled]=\"isDisabled()\"\n [aria-label]=\"buttonAriaLabel()\"\n [aria-labelledby]=\"buttonLabelledBy()\"\n [aria-describedby]=\"describedBy() ?? undefined\"\n (clicked)=\"openFilePicker()\"\n (focusout)=\"onPickerButtonFocusOut()\">\n @if (buttonText(); as text) {\n <span [id]=\"buttonTextId()\">{{ text }}</span>\n }\n </ea-button>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n } @else {\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"dropzoneLabel()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n }\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n aria-live=\"polite\"\n aria-relevant=\"additions removals\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [id]=\"id() + '-file-' + $index\"\n [title]=\"file.name\">\n <bdi>{{ file.name }}</bdi>\n </span>\n <span class=\"ea-file-uploader-field__size\">\n <bdi>{{ formatBytes(file.size) }}</bdi>\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
21696
|
+
template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"labelId()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onFileSelected($event)\" />\n\n @if (variant() === 'button') {\n <ea-button\n class=\"ea-file-uploader-field__button\"\n variant=\"secondary\"\n [size]=\"size()\"\n [icon]=\"buttonIcon()\"\n [disabled]=\"isDisabled()\"\n [aria-label]=\"buttonAriaLabel()\"\n [aria-labelledby]=\"buttonLabelledBy()\"\n [aria-describedby]=\"describedBy() ?? undefined\"\n (clicked)=\"openFilePicker()\"\n (focusout)=\"onPickerButtonFocusOut()\">\n @if (buttonText(); as text) {\n <span [id]=\"buttonTextId()\">{{ text }}</span>\n }\n </ea-button>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n } @else {\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"dropzoneLabel()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n }\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n aria-live=\"polite\"\n aria-relevant=\"additions removals\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [id]=\"id() + '-file-' + $index\"\n [title]=\"file.name\">\n <bdi>{{ file.name }}</bdi>\n </span>\n <span class=\"ea-file-uploader-field__size\">\n <bdi>{{ formatBytes(file.size) }}</bdi>\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
21506
21697
|
styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle)));color:var(--ea-file-uploader-dropzone-color-hover, color-mix(in srgb, var(--color-text-tertiary), var(--color-text-secondary)))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__button{align-self:flex-start}.ea-file-uploader-field--error .ea-file-uploader-field__button{--ea-button-border-color: var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"],
|
|
21507
21698
|
dependencies: [
|
|
21508
21699
|
{
|
|
@@ -21541,6 +21732,7 @@ var FileUploaderComponent = class FileUploaderComponent {
|
|
|
21541
21732
|
"help",
|
|
21542
21733
|
"forId",
|
|
21543
21734
|
"required",
|
|
21735
|
+
"optional",
|
|
21544
21736
|
"labelId"
|
|
21545
21737
|
]
|
|
21546
21738
|
},
|
|
@@ -21628,7 +21820,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
21628
21820
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
21629
21821
|
multi: true
|
|
21630
21822
|
}],
|
|
21631
|
-
template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"labelId()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onFileSelected($event)\" />\n\n @if (variant() === 'button') {\n <ea-button\n class=\"ea-file-uploader-field__button\"\n variant=\"secondary\"\n [size]=\"size()\"\n [icon]=\"buttonIcon()\"\n [disabled]=\"isDisabled()\"\n [aria-label]=\"buttonAriaLabel()\"\n [aria-labelledby]=\"buttonLabelledBy()\"\n [aria-describedby]=\"describedBy() ?? undefined\"\n (clicked)=\"openFilePicker()\"\n (focusout)=\"onPickerButtonFocusOut()\">\n @if (buttonText(); as text) {\n <span [id]=\"buttonTextId()\">{{ text }}</span>\n }\n </ea-button>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n } @else {\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"dropzoneLabel()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n }\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n aria-live=\"polite\"\n aria-relevant=\"additions removals\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [id]=\"id() + '-file-' + $index\"\n [title]=\"file.name\">\n <bdi>{{ file.name }}</bdi>\n </span>\n <span class=\"ea-file-uploader-field__size\">\n <bdi>{{ formatBytes(file.size) }}</bdi>\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
21823
|
+
template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"labelId()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (change)=\"onFileSelected($event)\" />\n\n @if (variant() === 'button') {\n <ea-button\n class=\"ea-file-uploader-field__button\"\n variant=\"secondary\"\n [size]=\"size()\"\n [icon]=\"buttonIcon()\"\n [disabled]=\"isDisabled()\"\n [aria-label]=\"buttonAriaLabel()\"\n [aria-labelledby]=\"buttonLabelledBy()\"\n [aria-describedby]=\"describedBy() ?? undefined\"\n (clicked)=\"openFilePicker()\"\n (focusout)=\"onPickerButtonFocusOut()\">\n @if (buttonText(); as text) {\n <span [id]=\"buttonTextId()\">{{ text }}</span>\n }\n </ea-button>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n } @else {\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"dropzoneLabel()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n }\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n aria-live=\"polite\"\n aria-relevant=\"additions removals\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [id]=\"id() + '-file-' + $index\"\n [title]=\"file.name\">\n <bdi>{{ file.name }}</bdi>\n </span>\n <span class=\"ea-file-uploader-field__size\">\n <bdi>{{ formatBytes(file.size) }}</bdi>\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
21632
21824
|
styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle)));color:var(--ea-file-uploader-dropzone-color-hover, color-mix(in srgb, var(--color-text-tertiary), var(--color-text-secondary)))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__button{align-self:flex-start}.ea-file-uploader-field--error .ea-file-uploader-field__button{--ea-button-border-color: var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"]
|
|
21633
21825
|
}]
|
|
21634
21826
|
}],
|
|
@@ -21669,6 +21861,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
21669
21861
|
required: false
|
|
21670
21862
|
}]
|
|
21671
21863
|
}],
|
|
21864
|
+
optional: [{
|
|
21865
|
+
type: i0.Input,
|
|
21866
|
+
args: [{
|
|
21867
|
+
isSignal: true,
|
|
21868
|
+
alias: "optional",
|
|
21869
|
+
required: false
|
|
21870
|
+
}]
|
|
21871
|
+
}],
|
|
21672
21872
|
hint: [{
|
|
21673
21873
|
type: i0.Input,
|
|
21674
21874
|
args: [{
|
|
@@ -23595,6 +23795,7 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
23595
23795
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
23596
23796
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
23597
23797
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
23798
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
23598
23799
|
ariaLabel = input(void 0, {
|
|
23599
23800
|
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
23600
23801
|
alias: "aria-label"
|
|
@@ -23947,6 +24148,13 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
23947
24148
|
isRequired: false,
|
|
23948
24149
|
transformFunction: null
|
|
23949
24150
|
},
|
|
24151
|
+
optional: {
|
|
24152
|
+
classPropertyName: "optional",
|
|
24153
|
+
publicName: "optional",
|
|
24154
|
+
isSignal: true,
|
|
24155
|
+
isRequired: false,
|
|
24156
|
+
transformFunction: null
|
|
24157
|
+
},
|
|
23950
24158
|
ariaLabel: {
|
|
23951
24159
|
classPropertyName: "ariaLabel",
|
|
23952
24160
|
publicName: "aria-label",
|
|
@@ -24150,7 +24358,7 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
24150
24358
|
}
|
|
24151
24359
|
],
|
|
24152
24360
|
ngImport: i0,
|
|
24153
|
-
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || 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 (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\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",
|
|
24361
|
+
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || 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 (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\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",
|
|
24154
24362
|
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"],
|
|
24155
24363
|
dependencies: [
|
|
24156
24364
|
{
|
|
@@ -24189,6 +24397,7 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
24189
24397
|
"help",
|
|
24190
24398
|
"forId",
|
|
24191
24399
|
"required",
|
|
24400
|
+
"optional",
|
|
24192
24401
|
"labelId"
|
|
24193
24402
|
]
|
|
24194
24403
|
},
|
|
@@ -24317,7 +24526,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
24317
24526
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
24318
24527
|
multi: true
|
|
24319
24528
|
}],
|
|
24320
|
-
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || 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 (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\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",
|
|
24529
|
+
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || 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 (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\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",
|
|
24321
24530
|
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"]
|
|
24322
24531
|
}]
|
|
24323
24532
|
}],
|
|
@@ -24371,6 +24580,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
24371
24580
|
required: false
|
|
24372
24581
|
}]
|
|
24373
24582
|
}],
|
|
24583
|
+
optional: [{
|
|
24584
|
+
type: i0.Input,
|
|
24585
|
+
args: [{
|
|
24586
|
+
isSignal: true,
|
|
24587
|
+
alias: "optional",
|
|
24588
|
+
required: false
|
|
24589
|
+
}]
|
|
24590
|
+
}],
|
|
24374
24591
|
ariaLabel: [{
|
|
24375
24592
|
type: i0.Input,
|
|
24376
24593
|
args: [{
|
|
@@ -24558,6 +24775,7 @@ var NumberInputComponent = class NumberInputComponent {
|
|
|
24558
24775
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
24559
24776
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
24560
24777
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
24778
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
24561
24779
|
placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
24562
24780
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
24563
24781
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
@@ -24714,6 +24932,13 @@ var NumberInputComponent = class NumberInputComponent {
|
|
|
24714
24932
|
isRequired: false,
|
|
24715
24933
|
transformFunction: null
|
|
24716
24934
|
},
|
|
24935
|
+
optional: {
|
|
24936
|
+
classPropertyName: "optional",
|
|
24937
|
+
publicName: "optional",
|
|
24938
|
+
isSignal: true,
|
|
24939
|
+
isRequired: false,
|
|
24940
|
+
transformFunction: null
|
|
24941
|
+
},
|
|
24717
24942
|
placeholder: {
|
|
24718
24943
|
classPropertyName: "placeholder",
|
|
24719
24944
|
publicName: "placeholder",
|
|
@@ -24846,7 +25071,7 @@ var NumberInputComponent = class NumberInputComponent {
|
|
|
24846
25071
|
isSignal: true
|
|
24847
25072
|
}],
|
|
24848
25073
|
ngImport: i0,
|
|
24849
|
-
template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-number-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <input\n #inputEl\n type=\"number\"\n class=\"ea-number-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.min]=\"effectiveMin() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.step]=\"step()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput()\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
25074
|
+
template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-number-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <input\n #inputEl\n type=\"number\"\n class=\"ea-number-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.min]=\"effectiveMin() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.step]=\"step()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput()\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
24850
25075
|
styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.75em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"],
|
|
24851
25076
|
dependencies: [
|
|
24852
25077
|
{
|
|
@@ -24859,6 +25084,7 @@ var NumberInputComponent = class NumberInputComponent {
|
|
|
24859
25084
|
"help",
|
|
24860
25085
|
"forId",
|
|
24861
25086
|
"required",
|
|
25087
|
+
"optional",
|
|
24862
25088
|
"labelId"
|
|
24863
25089
|
]
|
|
24864
25090
|
},
|
|
@@ -24902,7 +25128,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
24902
25128
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
24903
25129
|
multi: true
|
|
24904
25130
|
}],
|
|
24905
|
-
template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-number-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <input\n #inputEl\n type=\"number\"\n class=\"ea-number-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.min]=\"effectiveMin() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.step]=\"step()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput()\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
25131
|
+
template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-number-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <input\n #inputEl\n type=\"number\"\n class=\"ea-number-input\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.min]=\"effectiveMin() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.step]=\"step()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput()\"\n (keydown)=\"handleKeydown($event)\"\n (wheel)=\"handleWheel($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
24906
25132
|
styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.75em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"]
|
|
24907
25133
|
}]
|
|
24908
25134
|
}],
|
|
@@ -24936,6 +25162,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
24936
25162
|
required: false
|
|
24937
25163
|
}]
|
|
24938
25164
|
}],
|
|
25165
|
+
optional: [{
|
|
25166
|
+
type: i0.Input,
|
|
25167
|
+
args: [{
|
|
25168
|
+
isSignal: true,
|
|
25169
|
+
alias: "optional",
|
|
25170
|
+
required: false
|
|
25171
|
+
}]
|
|
25172
|
+
}],
|
|
24939
25173
|
placeholder: [{
|
|
24940
25174
|
type: i0.Input,
|
|
24941
25175
|
args: [{
|
|
@@ -26144,6 +26378,7 @@ var RadioGroupComponent = class RadioGroupComponent {
|
|
|
26144
26378
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
26145
26379
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
26146
26380
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
26381
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
26147
26382
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
26148
26383
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
26149
26384
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -26266,6 +26501,13 @@ var RadioGroupComponent = class RadioGroupComponent {
|
|
|
26266
26501
|
isRequired: false,
|
|
26267
26502
|
transformFunction: null
|
|
26268
26503
|
},
|
|
26504
|
+
optional: {
|
|
26505
|
+
classPropertyName: "optional",
|
|
26506
|
+
publicName: "optional",
|
|
26507
|
+
isSignal: true,
|
|
26508
|
+
isRequired: false,
|
|
26509
|
+
transformFunction: null
|
|
26510
|
+
},
|
|
26269
26511
|
hint: {
|
|
26270
26512
|
classPropertyName: "hint",
|
|
26271
26513
|
publicName: "hint",
|
|
@@ -26320,7 +26562,7 @@ var RadioGroupComponent = class RadioGroupComponent {
|
|
|
26320
26562
|
multi: true
|
|
26321
26563
|
}],
|
|
26322
26564
|
ngImport: i0,
|
|
26323
|
-
template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : 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 <ng-content />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
26565
|
+
template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : 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 <ng-content />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
26324
26566
|
styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-radio-group-field--2xs{font-size:var(--font-size-2xs)}.ea-radio-group-field--xs{font-size:var(--font-size-xs)}.ea-radio-group-field--sm{font-size:var(--font-size-sm)}.ea-radio-group-field--md{font-size:var(--font-size-md)}.ea-radio-group-field--lg{font-size:var(--font-size-lg)}.ea-radio-group-field--xl{font-size:var(--font-size-xl)}.ea-radio-group{display:flex;flex-direction:column;gap:.5em}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:1em}\n"],
|
|
26325
26567
|
dependencies: [{
|
|
26326
26568
|
kind: "component",
|
|
@@ -26332,6 +26574,7 @@ var RadioGroupComponent = class RadioGroupComponent {
|
|
|
26332
26574
|
"help",
|
|
26333
26575
|
"forId",
|
|
26334
26576
|
"required",
|
|
26577
|
+
"optional",
|
|
26335
26578
|
"labelId"
|
|
26336
26579
|
]
|
|
26337
26580
|
}, {
|
|
@@ -26364,7 +26607,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
26364
26607
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
26365
26608
|
multi: true
|
|
26366
26609
|
}],
|
|
26367
|
-
template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : 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 <ng-content />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
26610
|
+
template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : 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 <ng-content />\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
26368
26611
|
styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-radio-group-field--2xs{font-size:var(--font-size-2xs)}.ea-radio-group-field--xs{font-size:var(--font-size-xs)}.ea-radio-group-field--sm{font-size:var(--font-size-sm)}.ea-radio-group-field--md{font-size:var(--font-size-md)}.ea-radio-group-field--lg{font-size:var(--font-size-lg)}.ea-radio-group-field--xl{font-size:var(--font-size-xl)}.ea-radio-group{display:flex;flex-direction:column;gap:.5em}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:1em}\n"]
|
|
26369
26612
|
}]
|
|
26370
26613
|
}],
|
|
@@ -26441,6 +26684,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
26441
26684
|
required: false
|
|
26442
26685
|
}]
|
|
26443
26686
|
}],
|
|
26687
|
+
optional: [{
|
|
26688
|
+
type: i0.Input,
|
|
26689
|
+
args: [{
|
|
26690
|
+
isSignal: true,
|
|
26691
|
+
alias: "optional",
|
|
26692
|
+
required: false
|
|
26693
|
+
}]
|
|
26694
|
+
}],
|
|
26444
26695
|
hint: [{
|
|
26445
26696
|
type: i0.Input,
|
|
26446
26697
|
args: [{
|
|
@@ -26630,6 +26881,7 @@ var RangeSliderComponent = class RangeSliderComponent {
|
|
|
26630
26881
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
26631
26882
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
26632
26883
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
26884
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
26633
26885
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
26634
26886
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
26635
26887
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -26846,6 +27098,13 @@ var RangeSliderComponent = class RangeSliderComponent {
|
|
|
26846
27098
|
isRequired: false,
|
|
26847
27099
|
transformFunction: null
|
|
26848
27100
|
},
|
|
27101
|
+
optional: {
|
|
27102
|
+
classPropertyName: "optional",
|
|
27103
|
+
publicName: "optional",
|
|
27104
|
+
isSignal: true,
|
|
27105
|
+
isRequired: false,
|
|
27106
|
+
transformFunction: null
|
|
27107
|
+
},
|
|
26849
27108
|
hint: {
|
|
26850
27109
|
classPropertyName: "hint",
|
|
26851
27110
|
publicName: "hint",
|
|
@@ -26991,7 +27250,7 @@ var RangeSliderComponent = class RangeSliderComponent {
|
|
|
26991
27250
|
isSignal: true
|
|
26992
27251
|
}],
|
|
26993
27252
|
ngImport: i0,
|
|
26994
|
-
template: "<div\n class=\"ea-range-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-range-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} –\n {{ formatDisplay(clampedValue()[1]) }}\n </bdi>\n </span>\n }\n </div>\n }\n\n <div class=\"ea-range-slider\">\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-low-label'\">\n {{ lowThumbLabel() }}\n </span>\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-high-label'\">\n {{ highThumbLabel() }}\n </span>\n <div\n #trackEl\n class=\"ea-range-slider__track\"\n (pointerdown)=\"handleTrackPointerDown($event)\"\n (pointermove)=\"handleTrackPointerMove($event)\"\n (pointerup)=\"handleTrackPointerUp($event)\"\n (pointercancel)=\"handleTrackPointerUp($event)\">\n <div\n class=\"ea-range-slider__fill\"\n [style.inset-inline-start.%]=\"lowPercent()\"\n [style.inset-inline-end.%]=\"100 - highPercent()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-low'\"\n [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"clampedValue()[1]\"\n [attr.aria-valuenow]=\"clampedValue()[0]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"lowPercent()\"\n (keydown)=\"handleKeydown($event, 'low')\"\n (blur)=\"handleBlur()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-high'\"\n [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n [attr.aria-valuemin]=\"clampedValue()[0]\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()[1]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"highPercent()\"\n (keydown)=\"handleKeydown($event, 'high')\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-range-slider__minmax\">\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
27253
|
+
template: "<div\n class=\"ea-range-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-range-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} –\n {{ formatDisplay(clampedValue()[1]) }}\n </bdi>\n </span>\n }\n </div>\n }\n\n <div class=\"ea-range-slider\">\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-low-label'\">\n {{ lowThumbLabel() }}\n </span>\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-high-label'\">\n {{ highThumbLabel() }}\n </span>\n <div\n #trackEl\n class=\"ea-range-slider__track\"\n (pointerdown)=\"handleTrackPointerDown($event)\"\n (pointermove)=\"handleTrackPointerMove($event)\"\n (pointerup)=\"handleTrackPointerUp($event)\"\n (pointercancel)=\"handleTrackPointerUp($event)\">\n <div\n class=\"ea-range-slider__fill\"\n [style.inset-inline-start.%]=\"lowPercent()\"\n [style.inset-inline-end.%]=\"100 - highPercent()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-low'\"\n [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"clampedValue()[1]\"\n [attr.aria-valuenow]=\"clampedValue()[0]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"lowPercent()\"\n (keydown)=\"handleKeydown($event, 'low')\"\n (blur)=\"handleBlur()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-high'\"\n [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n [attr.aria-valuemin]=\"clampedValue()[0]\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()[1]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"highPercent()\"\n (keydown)=\"handleKeydown($event, 'high')\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-range-slider__minmax\">\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
26995
27254
|
styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-range-slider-field.ea-range-slider--2xs{font-size:var(--font-size-2xs)}.ea-range-slider-field.ea-range-slider--xs{font-size:var(--font-size-xs)}.ea-range-slider-field.ea-range-slider--sm{font-size:var(--font-size-sm)}.ea-range-slider-field.ea-range-slider--md{font-size:var(--font-size-md)}.ea-range-slider-field.ea-range-slider--lg{font-size:var(--font-size-lg)}.ea-range-slider-field.ea-range-slider--xl{font-size:var(--font-size-xl)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-range-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-range-slider--2xs .ea-range-slider{--ea-range-slider-size: .5rem}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__thumb-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-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-range-slider__fill{background-color:Highlight}}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-range-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-range-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-range-slider__thumb:focus-visible{z-index:1;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-range-slider__minmax-label{font-size:calc(var(--ea-range-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:default}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:default}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
|
|
26996
27255
|
dependencies: [
|
|
26997
27256
|
{
|
|
@@ -27004,6 +27263,7 @@ var RangeSliderComponent = class RangeSliderComponent {
|
|
|
27004
27263
|
"help",
|
|
27005
27264
|
"forId",
|
|
27006
27265
|
"required",
|
|
27266
|
+
"optional",
|
|
27007
27267
|
"labelId"
|
|
27008
27268
|
]
|
|
27009
27269
|
},
|
|
@@ -27048,7 +27308,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
27048
27308
|
useExisting: forwardRef(() => RangeSliderComponent),
|
|
27049
27309
|
multi: true
|
|
27050
27310
|
}],
|
|
27051
|
-
template: "<div\n class=\"ea-range-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-range-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} –\n {{ formatDisplay(clampedValue()[1]) }}\n </bdi>\n </span>\n }\n </div>\n }\n\n <div class=\"ea-range-slider\">\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-low-label'\">\n {{ lowThumbLabel() }}\n </span>\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-high-label'\">\n {{ highThumbLabel() }}\n </span>\n <div\n #trackEl\n class=\"ea-range-slider__track\"\n (pointerdown)=\"handleTrackPointerDown($event)\"\n (pointermove)=\"handleTrackPointerMove($event)\"\n (pointerup)=\"handleTrackPointerUp($event)\"\n (pointercancel)=\"handleTrackPointerUp($event)\">\n <div\n class=\"ea-range-slider__fill\"\n [style.inset-inline-start.%]=\"lowPercent()\"\n [style.inset-inline-end.%]=\"100 - highPercent()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-low'\"\n [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"clampedValue()[1]\"\n [attr.aria-valuenow]=\"clampedValue()[0]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"lowPercent()\"\n (keydown)=\"handleKeydown($event, 'low')\"\n (blur)=\"handleBlur()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-high'\"\n [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n [attr.aria-valuemin]=\"clampedValue()[0]\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()[1]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"highPercent()\"\n (keydown)=\"handleKeydown($event, 'high')\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-range-slider__minmax\">\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
27311
|
+
template: "<div\n class=\"ea-range-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-range-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} –\n {{ formatDisplay(clampedValue()[1]) }}\n </bdi>\n </span>\n }\n </div>\n }\n\n <div class=\"ea-range-slider\">\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-low-label'\">\n {{ lowThumbLabel() }}\n </span>\n <span\n class=\"ea-range-slider__thumb-label\"\n [id]=\"id() + '-high-label'\">\n {{ highThumbLabel() }}\n </span>\n <div\n #trackEl\n class=\"ea-range-slider__track\"\n (pointerdown)=\"handleTrackPointerDown($event)\"\n (pointermove)=\"handleTrackPointerMove($event)\"\n (pointerup)=\"handleTrackPointerUp($event)\"\n (pointercancel)=\"handleTrackPointerUp($event)\">\n <div\n class=\"ea-range-slider__fill\"\n [style.inset-inline-start.%]=\"lowPercent()\"\n [style.inset-inline-end.%]=\"100 - highPercent()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-low'\"\n [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"clampedValue()[1]\"\n [attr.aria-valuenow]=\"clampedValue()[0]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"lowPercent()\"\n (keydown)=\"handleKeydown($event, 'low')\"\n (blur)=\"handleBlur()\">\n </div>\n <div\n class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id() + '-high'\"\n [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n [attr.aria-valuemin]=\"clampedValue()[0]\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()[1]\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n [attr.aria-disabled]=\"isDisabled() || 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 [style.inset-inline-start.%]=\"highPercent()\"\n (keydown)=\"handleKeydown($event, 'high')\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-range-slider__minmax\">\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-range-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
27052
27312
|
styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-range-slider-field.ea-range-slider--2xs{font-size:var(--font-size-2xs)}.ea-range-slider-field.ea-range-slider--xs{font-size:var(--font-size-xs)}.ea-range-slider-field.ea-range-slider--sm{font-size:var(--font-size-sm)}.ea-range-slider-field.ea-range-slider--md{font-size:var(--font-size-md)}.ea-range-slider-field.ea-range-slider--lg{font-size:var(--font-size-lg)}.ea-range-slider-field.ea-range-slider--xl{font-size:var(--font-size-xl)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-range-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-range-slider--2xs .ea-range-slider{--ea-range-slider-size: .5rem}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__thumb-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-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-range-slider__fill{background-color:Highlight}}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-range-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-range-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-range-slider__thumb:focus-visible{z-index:1;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-range-slider__minmax-label{font-size:calc(var(--ea-range-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:default}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:default}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
|
|
27053
27313
|
}]
|
|
27054
27314
|
}],
|
|
@@ -27081,6 +27341,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
27081
27341
|
required: false
|
|
27082
27342
|
}]
|
|
27083
27343
|
}],
|
|
27344
|
+
optional: [{
|
|
27345
|
+
type: i0.Input,
|
|
27346
|
+
args: [{
|
|
27347
|
+
isSignal: true,
|
|
27348
|
+
alias: "optional",
|
|
27349
|
+
required: false
|
|
27350
|
+
}]
|
|
27351
|
+
}],
|
|
27084
27352
|
hint: [{
|
|
27085
27353
|
type: i0.Input,
|
|
27086
27354
|
args: [{
|
|
@@ -27419,6 +27687,7 @@ var RatingComponent = class RatingComponent {
|
|
|
27419
27687
|
});
|
|
27420
27688
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
27421
27689
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
27690
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
27422
27691
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
27423
27692
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
27424
27693
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -27620,6 +27889,13 @@ var RatingComponent = class RatingComponent {
|
|
|
27620
27889
|
isRequired: false,
|
|
27621
27890
|
transformFunction: null
|
|
27622
27891
|
},
|
|
27892
|
+
optional: {
|
|
27893
|
+
classPropertyName: "optional",
|
|
27894
|
+
publicName: "optional",
|
|
27895
|
+
isSignal: true,
|
|
27896
|
+
isRequired: false,
|
|
27897
|
+
transformFunction: null
|
|
27898
|
+
},
|
|
27623
27899
|
hint: {
|
|
27624
27900
|
classPropertyName: "hint",
|
|
27625
27901
|
publicName: "hint",
|
|
@@ -27744,7 +28020,7 @@ var RatingComponent = class RatingComponent {
|
|
|
27744
28020
|
isSignal: true
|
|
27745
28021
|
}],
|
|
27746
28022
|
ngImport: i0,
|
|
27747
|
-
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"\n stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n \" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28023
|
+
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"\n stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n \" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
27748
28024
|
styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
|
|
27749
28025
|
dependencies: [
|
|
27750
28026
|
{
|
|
@@ -27757,6 +28033,7 @@ var RatingComponent = class RatingComponent {
|
|
|
27757
28033
|
"help",
|
|
27758
28034
|
"forId",
|
|
27759
28035
|
"required",
|
|
28036
|
+
"optional",
|
|
27760
28037
|
"labelId"
|
|
27761
28038
|
]
|
|
27762
28039
|
},
|
|
@@ -27816,7 +28093,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
27816
28093
|
useExisting: forwardRef(() => RatingComponent),
|
|
27817
28094
|
multi: true
|
|
27818
28095
|
}],
|
|
27819
|
-
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"\n stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n \" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28096
|
+
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"\n stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n \" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
27820
28097
|
styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
|
|
27821
28098
|
}]
|
|
27822
28099
|
}],
|
|
@@ -27858,6 +28135,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
27858
28135
|
required: false
|
|
27859
28136
|
}]
|
|
27860
28137
|
}],
|
|
28138
|
+
optional: [{
|
|
28139
|
+
type: i0.Input,
|
|
28140
|
+
args: [{
|
|
28141
|
+
isSignal: true,
|
|
28142
|
+
alias: "optional",
|
|
28143
|
+
required: false
|
|
28144
|
+
}]
|
|
28145
|
+
}],
|
|
27861
28146
|
hint: [{
|
|
27862
28147
|
type: i0.Input,
|
|
27863
28148
|
args: [{
|
|
@@ -27993,6 +28278,7 @@ var SegmentedComponent = class SegmentedComponent {
|
|
|
27993
28278
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
27994
28279
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
27995
28280
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
28281
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
27996
28282
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
27997
28283
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
27998
28284
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -28154,6 +28440,13 @@ var SegmentedComponent = class SegmentedComponent {
|
|
|
28154
28440
|
isRequired: false,
|
|
28155
28441
|
transformFunction: null
|
|
28156
28442
|
},
|
|
28443
|
+
optional: {
|
|
28444
|
+
classPropertyName: "optional",
|
|
28445
|
+
publicName: "optional",
|
|
28446
|
+
isSignal: true,
|
|
28447
|
+
isRequired: false,
|
|
28448
|
+
transformFunction: null
|
|
28449
|
+
},
|
|
28157
28450
|
hint: {
|
|
28158
28451
|
classPropertyName: "hint",
|
|
28159
28452
|
publicName: "hint",
|
|
@@ -28252,7 +28545,7 @@ var SegmentedComponent = class SegmentedComponent {
|
|
|
28252
28545
|
isSignal: true
|
|
28253
28546
|
}],
|
|
28254
28547
|
ngImport: i0,
|
|
28255
|
-
template: "<div\n class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <button\n #optionEl\n type=\"button\"\n class=\"ea-segmented__option\"\n role=\"radio\"\n [class.ea-segmented__option--selected]=\"isSelected(option)\"\n [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n [disabled]=\"isOptionDisabled(option)\"\n [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n (click)=\"select(option)\"\n (keydown)=\"handleKeydown($event, i)\">\n {{ option.label }}\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28548
|
+
template: "<div\n class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <button\n #optionEl\n type=\"button\"\n class=\"ea-segmented__option\"\n role=\"radio\"\n [class.ea-segmented__option--selected]=\"isSelected(option)\"\n [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n [disabled]=\"isOptionDisabled(option)\"\n [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n (click)=\"select(option)\"\n (keydown)=\"handleKeydown($event, i)\">\n {{ option.label }}\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28256
28549
|
styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-segmented-field--full-width{width:100%}.ea-segmented-field--2xs{font-size:var(--font-size-2xs)}.ea-segmented-field--xs{font-size:var(--font-size-xs)}.ea-segmented-field--sm{font-size:var(--font-size-sm)}.ea-segmented-field--md{font-size:var(--font-size-md)}.ea-segmented-field--lg{font-size:var(--font-size-lg)}.ea-segmented-field--xl{font-size:var(--font-size-xl)}.ea-segmented{display:inline-flex;align-self:flex-start;flex-direction:row;flex-wrap:wrap;row-gap:.125em;max-width:100%;padding:.125em;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:default}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-size:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}@media(forced-colors:active){.ea-segmented__option--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-segmented__option--disabled{cursor:default}\n"],
|
|
28257
28550
|
dependencies: [
|
|
28258
28551
|
{
|
|
@@ -28265,6 +28558,7 @@ var SegmentedComponent = class SegmentedComponent {
|
|
|
28265
28558
|
"help",
|
|
28266
28559
|
"forId",
|
|
28267
28560
|
"required",
|
|
28561
|
+
"optional",
|
|
28268
28562
|
"labelId"
|
|
28269
28563
|
]
|
|
28270
28564
|
},
|
|
@@ -28312,7 +28606,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28312
28606
|
useExisting: forwardRef(() => SegmentedComponent),
|
|
28313
28607
|
multi: true
|
|
28314
28608
|
}],
|
|
28315
|
-
template: "<div\n class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <button\n #optionEl\n type=\"button\"\n class=\"ea-segmented__option\"\n role=\"radio\"\n [class.ea-segmented__option--selected]=\"isSelected(option)\"\n [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n [disabled]=\"isOptionDisabled(option)\"\n [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n (click)=\"select(option)\"\n (keydown)=\"handleKeydown($event, i)\">\n {{ option.label }}\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28609
|
+
template: "<div\n class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <button\n #optionEl\n type=\"button\"\n class=\"ea-segmented__option\"\n role=\"radio\"\n [class.ea-segmented__option--selected]=\"isSelected(option)\"\n [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n [disabled]=\"isOptionDisabled(option)\"\n [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n (click)=\"select(option)\"\n (keydown)=\"handleKeydown($event, i)\">\n {{ option.label }}\n </button>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28316
28610
|
styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-segmented-field--full-width{width:100%}.ea-segmented-field--2xs{font-size:var(--font-size-2xs)}.ea-segmented-field--xs{font-size:var(--font-size-xs)}.ea-segmented-field--sm{font-size:var(--font-size-sm)}.ea-segmented-field--md{font-size:var(--font-size-md)}.ea-segmented-field--lg{font-size:var(--font-size-lg)}.ea-segmented-field--xl{font-size:var(--font-size-xl)}.ea-segmented{display:inline-flex;align-self:flex-start;flex-direction:row;flex-wrap:wrap;row-gap:.125em;max-width:100%;padding:.125em;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:default}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-size:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}@media(forced-colors:active){.ea-segmented__option--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-segmented__option--disabled{cursor:default}\n"]
|
|
28317
28611
|
}]
|
|
28318
28612
|
}],
|
|
@@ -28353,6 +28647,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28353
28647
|
required: false
|
|
28354
28648
|
}]
|
|
28355
28649
|
}],
|
|
28650
|
+
optional: [{
|
|
28651
|
+
type: i0.Input,
|
|
28652
|
+
args: [{
|
|
28653
|
+
isSignal: true,
|
|
28654
|
+
alias: "optional",
|
|
28655
|
+
required: false
|
|
28656
|
+
}]
|
|
28657
|
+
}],
|
|
28356
28658
|
hint: [{
|
|
28357
28659
|
type: i0.Input,
|
|
28358
28660
|
args: [{
|
|
@@ -28458,6 +28760,7 @@ var SliderComponent = class SliderComponent {
|
|
|
28458
28760
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
28459
28761
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
28460
28762
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
28763
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
28461
28764
|
hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
28462
28765
|
errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
|
|
28463
28766
|
errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
|
|
@@ -28671,6 +28974,13 @@ var SliderComponent = class SliderComponent {
|
|
|
28671
28974
|
isRequired: false,
|
|
28672
28975
|
transformFunction: null
|
|
28673
28976
|
},
|
|
28977
|
+
optional: {
|
|
28978
|
+
classPropertyName: "optional",
|
|
28979
|
+
publicName: "optional",
|
|
28980
|
+
isSignal: true,
|
|
28981
|
+
isRequired: false,
|
|
28982
|
+
transformFunction: null
|
|
28983
|
+
},
|
|
28674
28984
|
hint: {
|
|
28675
28985
|
classPropertyName: "hint",
|
|
28676
28986
|
publicName: "hint",
|
|
@@ -28823,7 +29133,7 @@ var SliderComponent = class SliderComponent {
|
|
|
28823
29133
|
isSignal: true
|
|
28824
29134
|
}],
|
|
28825
29135
|
ngImport: i0,
|
|
28826
|
-
template: "<div\n class=\"ea-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-slider-field__value\">\n {{ formatDisplay(clampedValue()) }}\n </span>\n }\n </div>\n }\n\n <div class=\"ea-slider\">\n <div\n #trackEl\n class=\"ea-slider__track\"\n (pointerdown)=\"handlePointerDown($event)\"\n (pointermove)=\"handlePointerMove($event)\"\n (pointerup)=\"handlePointerUp($event)\"\n (pointercancel)=\"handlePointerUp($event)\"\n (lostpointercapture)=\"handlePointerUp($event)\">\n <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n @for (tick of tickPercents(); track $index) {\n <span\n class=\"ea-slider__tick\"\n aria-hidden=\"true\"\n [style.inset-inline-start.%]=\"tick\">\n </span>\n }\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"errored() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n [style.inset-inline-start.%]=\"percent()\"\n (keydown)=\"handleKeydown($event)\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-slider__minmax\">\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
29136
|
+
template: "<div\n class=\"ea-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n @if (showValue()) {\n <span class=\"ea-slider-field__value\">\n {{ formatDisplay(clampedValue()) }}\n </span>\n }\n </div>\n }\n\n <div class=\"ea-slider\">\n <div\n #trackEl\n class=\"ea-slider__track\"\n (pointerdown)=\"handlePointerDown($event)\"\n (pointermove)=\"handlePointerMove($event)\"\n (pointerup)=\"handlePointerUp($event)\"\n (pointercancel)=\"handlePointerUp($event)\"\n (lostpointercapture)=\"handlePointerUp($event)\">\n <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n @for (tick of tickPercents(); track $index) {\n <span\n class=\"ea-slider__tick\"\n aria-hidden=\"true\"\n [style.inset-inline-start.%]=\"tick\">\n </span>\n }\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"errored() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n [style.inset-inline-start.%]=\"percent()\"\n (keydown)=\"handleKeydown($event)\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-slider__minmax\">\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28827
29137
|
styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:default}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:default}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
|
|
28828
29138
|
dependencies: [
|
|
28829
29139
|
{
|
|
@@ -28836,6 +29146,7 @@ var SliderComponent = class SliderComponent {
|
|
|
28836
29146
|
"help",
|
|
28837
29147
|
"forId",
|
|
28838
29148
|
"required",
|
|
29149
|
+
"optional",
|
|
28839
29150
|
"labelId"
|
|
28840
29151
|
]
|
|
28841
29152
|
},
|
|
@@ -28880,7 +29191,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28880
29191
|
useExisting: forwardRef(() => SliderComponent),
|
|
28881
29192
|
multi: true
|
|
28882
29193
|
}],
|
|
28883
|
-
template: "<div\n class=\"ea-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-slider-field__value\">\n {{ formatDisplay(clampedValue()) }}\n </span>\n }\n </div>\n }\n\n <div class=\"ea-slider\">\n <div\n #trackEl\n class=\"ea-slider__track\"\n (pointerdown)=\"handlePointerDown($event)\"\n (pointermove)=\"handlePointerMove($event)\"\n (pointerup)=\"handlePointerUp($event)\"\n (pointercancel)=\"handlePointerUp($event)\"\n (lostpointercapture)=\"handlePointerUp($event)\">\n <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n @for (tick of tickPercents(); track $index) {\n <span\n class=\"ea-slider__tick\"\n aria-hidden=\"true\"\n [style.inset-inline-start.%]=\"tick\">\n </span>\n }\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"errored() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n [style.inset-inline-start.%]=\"percent()\"\n (keydown)=\"handleKeydown($event)\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-slider__minmax\">\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
29194
|
+
template: "<div\n class=\"ea-slider-field\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-slider-field__header\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n @if (showValue()) {\n <span class=\"ea-slider-field__value\">\n {{ formatDisplay(clampedValue()) }}\n </span>\n }\n </div>\n }\n\n <div class=\"ea-slider\">\n <div\n #trackEl\n class=\"ea-slider__track\"\n (pointerdown)=\"handlePointerDown($event)\"\n (pointermove)=\"handlePointerMove($event)\"\n (pointerup)=\"handlePointerUp($event)\"\n (pointercancel)=\"handlePointerUp($event)\"\n (lostpointercapture)=\"handlePointerUp($event)\">\n <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n @for (tick of tickPercents(); track $index) {\n <span\n class=\"ea-slider__tick\"\n aria-hidden=\"true\"\n [style.inset-inline-start.%]=\"tick\">\n </span>\n }\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"!label() && !ariaLabelledby() ? (ariaLabel() ?? null) : null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"clampedValue()\"\n [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"errored() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n [style.inset-inline-start.%]=\"percent()\"\n (keydown)=\"handleKeydown($event)\"\n (blur)=\"handleBlur()\">\n </div>\n </div>\n\n @if (showMinMaxLabels()) {\n <div class=\"ea-slider__minmax\">\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(min()) }}\n </span>\n <span class=\"ea-slider__minmax-label\">\n {{ formatDisplay(max()) }}\n </span>\n </div>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28884
29195
|
styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:default}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:default}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
|
|
28885
29196
|
}]
|
|
28886
29197
|
}],
|
|
@@ -28913,6 +29224,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28913
29224
|
required: false
|
|
28914
29225
|
}]
|
|
28915
29226
|
}],
|
|
29227
|
+
optional: [{
|
|
29228
|
+
type: i0.Input,
|
|
29229
|
+
args: [{
|
|
29230
|
+
isSignal: true,
|
|
29231
|
+
alias: "optional",
|
|
29232
|
+
required: false
|
|
29233
|
+
}]
|
|
29234
|
+
}],
|
|
28916
29235
|
hint: [{
|
|
28917
29236
|
type: i0.Input,
|
|
28918
29237
|
args: [{
|
|
@@ -30652,6 +30971,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
30652
30971
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
30653
30972
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
30654
30973
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
30974
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
30655
30975
|
ariaLabel = input(void 0, {
|
|
30656
30976
|
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
30657
30977
|
alias: "aria-label"
|
|
@@ -30789,6 +31109,13 @@ var TextareaComponent = class TextareaComponent {
|
|
|
30789
31109
|
isRequired: false,
|
|
30790
31110
|
transformFunction: null
|
|
30791
31111
|
},
|
|
31112
|
+
optional: {
|
|
31113
|
+
classPropertyName: "optional",
|
|
31114
|
+
publicName: "optional",
|
|
31115
|
+
isSignal: true,
|
|
31116
|
+
isRequired: false,
|
|
31117
|
+
transformFunction: null
|
|
31118
|
+
},
|
|
30792
31119
|
ariaLabel: {
|
|
30793
31120
|
classPropertyName: "ariaLabel",
|
|
30794
31121
|
publicName: "aria-label",
|
|
@@ -30920,7 +31247,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
30920
31247
|
isSignal: true
|
|
30921
31248
|
}],
|
|
30922
31249
|
ngImport: i0,
|
|
30923
|
-
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
31250
|
+
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
30924
31251
|
styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
|
|
30925
31252
|
dependencies: [
|
|
30926
31253
|
{
|
|
@@ -30933,6 +31260,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
30933
31260
|
"help",
|
|
30934
31261
|
"forId",
|
|
30935
31262
|
"required",
|
|
31263
|
+
"optional",
|
|
30936
31264
|
"labelId"
|
|
30937
31265
|
]
|
|
30938
31266
|
},
|
|
@@ -30987,7 +31315,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
30987
31315
|
useExisting: forwardRef(() => TextareaComponent),
|
|
30988
31316
|
multi: true
|
|
30989
31317
|
}],
|
|
30990
|
-
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
31318
|
+
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
30991
31319
|
styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
|
|
30992
31320
|
}]
|
|
30993
31321
|
}],
|
|
@@ -31020,6 +31348,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
31020
31348
|
required: false
|
|
31021
31349
|
}]
|
|
31022
31350
|
}],
|
|
31351
|
+
optional: [{
|
|
31352
|
+
type: i0.Input,
|
|
31353
|
+
args: [{
|
|
31354
|
+
isSignal: true,
|
|
31355
|
+
alias: "optional",
|
|
31356
|
+
required: false
|
|
31357
|
+
}]
|
|
31358
|
+
}],
|
|
31023
31359
|
ariaLabel: [{
|
|
31024
31360
|
type: i0.Input,
|
|
31025
31361
|
args: [{
|
|
@@ -31334,6 +31670,7 @@ var TimePickerComponent = class TimePickerComponent {
|
|
|
31334
31670
|
label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
31335
31671
|
labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
|
|
31336
31672
|
labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
|
|
31673
|
+
optional = input(false, ...ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []);
|
|
31337
31674
|
placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
31338
31675
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
31339
31676
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
@@ -31721,6 +32058,13 @@ var TimePickerComponent = class TimePickerComponent {
|
|
|
31721
32058
|
isRequired: false,
|
|
31722
32059
|
transformFunction: null
|
|
31723
32060
|
},
|
|
32061
|
+
optional: {
|
|
32062
|
+
classPropertyName: "optional",
|
|
32063
|
+
publicName: "optional",
|
|
32064
|
+
isSignal: true,
|
|
32065
|
+
isRequired: false,
|
|
32066
|
+
transformFunction: null
|
|
32067
|
+
},
|
|
31724
32068
|
placeholder: {
|
|
31725
32069
|
classPropertyName: "placeholder",
|
|
31726
32070
|
publicName: "placeholder",
|
|
@@ -31867,7 +32211,7 @@ var TimePickerComponent = class TimePickerComponent {
|
|
|
31867
32211
|
}
|
|
31868
32212
|
],
|
|
31869
32213
|
ngImport: i0,
|
|
31870
|
-
template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-time-picker\">\n <div\n class=\"ea-time-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-time-picker__clear\"\n [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-time-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 [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n [surfaceId]=\"popoverId()\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-time-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown.escape)=\"onPopoverEscape($event)\">\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n (click)=\"onStepClick('hours', 1, $event)\"\n (mousedown)=\"startHold('hours', 1, $event)\"\n (touchstart)=\"startHold('hours', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #hoursEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n [attr.aria-valuenow]=\"displayHours()\"\n [value]=\"hoursText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('hours', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n (click)=\"onStepClick('hours', -1, $event)\"\n (mousedown)=\"startHold('hours', -1, $event)\"\n (touchstart)=\"startHold('hours', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n (click)=\"onStepClick('minutes', 1, $event)\"\n (mousedown)=\"startHold('minutes', 1, $event)\"\n (touchstart)=\"startHold('minutes', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #minutesEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().minutes\"\n [value]=\"minutesText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('minutes', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n (click)=\"onStepClick('minutes', -1, $event)\"\n (mousedown)=\"startHold('minutes', -1, $event)\"\n (touchstart)=\"startHold('minutes', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n @if (includeSeconds()) {\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n (click)=\"onStepClick('seconds', 1, $event)\"\n (mousedown)=\"startHold('seconds', 1, $event)\"\n (touchstart)=\"startHold('seconds', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #secondsEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().seconds\"\n [value]=\"secondsText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('seconds', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n (click)=\"onStepClick('seconds', -1, $event)\"\n (mousedown)=\"startHold('seconds', -1, $event)\"\n (touchstart)=\"startHold('seconds', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n }\n\n @if (format() === '12h') {\n <div class=\"ea-time-picker__period\">\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"period() === 'PM' && togglePeriod()\">\n {{ i18n.messages().timePicker.amLabel }}\n </button>\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"period() === 'AM' && togglePeriod()\">\n {{ i18n.messages().timePicker.pmLabel }}\n </button>\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",
|
|
32214
|
+
template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-time-picker\">\n <div\n class=\"ea-time-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-time-picker__clear\"\n [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-time-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 [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n [surfaceId]=\"popoverId()\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-time-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown.escape)=\"onPopoverEscape($event)\">\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n (click)=\"onStepClick('hours', 1, $event)\"\n (mousedown)=\"startHold('hours', 1, $event)\"\n (touchstart)=\"startHold('hours', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #hoursEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n [attr.aria-valuenow]=\"displayHours()\"\n [value]=\"hoursText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('hours', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n (click)=\"onStepClick('hours', -1, $event)\"\n (mousedown)=\"startHold('hours', -1, $event)\"\n (touchstart)=\"startHold('hours', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n (click)=\"onStepClick('minutes', 1, $event)\"\n (mousedown)=\"startHold('minutes', 1, $event)\"\n (touchstart)=\"startHold('minutes', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #minutesEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().minutes\"\n [value]=\"minutesText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('minutes', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n (click)=\"onStepClick('minutes', -1, $event)\"\n (mousedown)=\"startHold('minutes', -1, $event)\"\n (touchstart)=\"startHold('minutes', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n @if (includeSeconds()) {\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n (click)=\"onStepClick('seconds', 1, $event)\"\n (mousedown)=\"startHold('seconds', 1, $event)\"\n (touchstart)=\"startHold('seconds', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #secondsEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().seconds\"\n [value]=\"secondsText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('seconds', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n (click)=\"onStepClick('seconds', -1, $event)\"\n (mousedown)=\"startHold('seconds', -1, $event)\"\n (touchstart)=\"startHold('seconds', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n }\n\n @if (format() === '12h') {\n <div class=\"ea-time-picker__period\">\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"period() === 'PM' && togglePeriod()\">\n {{ i18n.messages().timePicker.amLabel }}\n </button>\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"period() === 'AM' && togglePeriod()\">\n {{ i18n.messages().timePicker.pmLabel }}\n </button>\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",
|
|
31871
32215
|
styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.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-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;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:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"],
|
|
31872
32216
|
dependencies: [
|
|
31873
32217
|
{
|
|
@@ -31895,6 +32239,7 @@ var TimePickerComponent = class TimePickerComponent {
|
|
|
31895
32239
|
"help",
|
|
31896
32240
|
"forId",
|
|
31897
32241
|
"required",
|
|
32242
|
+
"optional",
|
|
31898
32243
|
"labelId"
|
|
31899
32244
|
]
|
|
31900
32245
|
},
|
|
@@ -31974,7 +32319,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
31974
32319
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
31975
32320
|
multi: true
|
|
31976
32321
|
}],
|
|
31977
|
-
template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-time-picker\">\n <div\n class=\"ea-time-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-time-picker__clear\"\n [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-time-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 [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n [surfaceId]=\"popoverId()\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-time-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown.escape)=\"onPopoverEscape($event)\">\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n (click)=\"onStepClick('hours', 1, $event)\"\n (mousedown)=\"startHold('hours', 1, $event)\"\n (touchstart)=\"startHold('hours', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #hoursEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n [attr.aria-valuenow]=\"displayHours()\"\n [value]=\"hoursText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('hours', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n (click)=\"onStepClick('hours', -1, $event)\"\n (mousedown)=\"startHold('hours', -1, $event)\"\n (touchstart)=\"startHold('hours', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n (click)=\"onStepClick('minutes', 1, $event)\"\n (mousedown)=\"startHold('minutes', 1, $event)\"\n (touchstart)=\"startHold('minutes', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #minutesEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().minutes\"\n [value]=\"minutesText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('minutes', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n (click)=\"onStepClick('minutes', -1, $event)\"\n (mousedown)=\"startHold('minutes', -1, $event)\"\n (touchstart)=\"startHold('minutes', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n @if (includeSeconds()) {\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n (click)=\"onStepClick('seconds', 1, $event)\"\n (mousedown)=\"startHold('seconds', 1, $event)\"\n (touchstart)=\"startHold('seconds', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #secondsEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().seconds\"\n [value]=\"secondsText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('seconds', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n (click)=\"onStepClick('seconds', -1, $event)\"\n (mousedown)=\"startHold('seconds', -1, $event)\"\n (touchstart)=\"startHold('seconds', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n }\n\n @if (format() === '12h') {\n <div class=\"ea-time-picker__period\">\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"period() === 'PM' && togglePeriod()\">\n {{ i18n.messages().timePicker.amLabel }}\n </button>\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"period() === 'AM' && togglePeriod()\">\n {{ i18n.messages().timePicker.pmLabel }}\n </button>\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",
|
|
32322
|
+
template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div class=\"ea-time-picker\">\n <div\n class=\"ea-time-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-time-picker__clear\"\n [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-time-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 [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n [surfaceId]=\"popoverId()\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-time-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown.escape)=\"onPopoverEscape($event)\">\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n (click)=\"onStepClick('hours', 1, $event)\"\n (mousedown)=\"startHold('hours', 1, $event)\"\n (touchstart)=\"startHold('hours', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #hoursEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n [attr.aria-valuenow]=\"displayHours()\"\n [value]=\"hoursText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('hours', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n (click)=\"onStepClick('hours', -1, $event)\"\n (mousedown)=\"startHold('hours', -1, $event)\"\n (touchstart)=\"startHold('hours', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n (click)=\"onStepClick('minutes', 1, $event)\"\n (mousedown)=\"startHold('minutes', 1, $event)\"\n (touchstart)=\"startHold('minutes', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #minutesEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().minutes\"\n [value]=\"minutesText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('minutes', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n (click)=\"onStepClick('minutes', -1, $event)\"\n (mousedown)=\"startHold('minutes', -1, $event)\"\n (touchstart)=\"startHold('minutes', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n\n @if (includeSeconds()) {\n <span\n class=\"ea-time-picker__separator\"\n aria-hidden=\"true\">\n :\n </span>\n <div class=\"ea-time-picker__column\">\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n (click)=\"onStepClick('seconds', 1, $event)\"\n (mousedown)=\"startHold('seconds', 1, $event)\"\n (touchstart)=\"startHold('seconds', 1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-up aria-hidden=\"true\" />\n </button>\n <input\n #secondsEl\n type=\"text\"\n class=\"ea-time-picker__value\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"2\"\n role=\"spinbutton\"\n [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"59\"\n [attr.aria-valuenow]=\"parsed().seconds\"\n [value]=\"secondsText()\"\n (focus)=\"onSpinnerFocus($event)\"\n (input)=\"onSpinnerInput('seconds', $event)\"\n (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n (blur)=\"onSpinnerBlur()\" />\n <button\n type=\"button\"\n class=\"ea-time-picker__step\"\n [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n (click)=\"onStepClick('seconds', -1, $event)\"\n (mousedown)=\"startHold('seconds', -1, $event)\"\n (touchstart)=\"startHold('seconds', -1, $event)\"\n (mouseup)=\"stopHold()\"\n (mouseleave)=\"stopHold()\"\n (touchend)=\"stopHold()\"\n (touchcancel)=\"stopHold()\">\n <ea-icon-chevron-down aria-hidden=\"true\" />\n </button>\n </div>\n }\n\n @if (format() === '12h') {\n <div class=\"ea-time-picker__period\">\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"period() === 'PM' && togglePeriod()\">\n {{ i18n.messages().timePicker.amLabel }}\n </button>\n <button\n type=\"button\"\n class=\"ea-time-picker__period-option\"\n [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"period() === 'AM' && togglePeriod()\">\n {{ i18n.messages().timePicker.pmLabel }}\n </button>\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",
|
|
31978
32323
|
styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.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-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;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:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"]
|
|
31979
32324
|
}]
|
|
31980
32325
|
}],
|
|
@@ -32024,6 +32369,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32024
32369
|
required: false
|
|
32025
32370
|
}]
|
|
32026
32371
|
}],
|
|
32372
|
+
optional: [{
|
|
32373
|
+
type: i0.Input,
|
|
32374
|
+
args: [{
|
|
32375
|
+
isSignal: true,
|
|
32376
|
+
alias: "optional",
|
|
32377
|
+
required: false
|
|
32378
|
+
}]
|
|
32379
|
+
}],
|
|
32027
32380
|
placeholder: [{
|
|
32028
32381
|
type: i0.Input,
|
|
32029
32382
|
args: [{
|