@eagami/ui 5.12.2 → 5.14.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 +161 -68
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +24 -6
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -551,6 +551,7 @@ const messages$e = {
|
|
|
551
551
|
range: (start, end, total) => `${start}–${end} من ${total}`,
|
|
552
552
|
previousPage: 'الصفحة السابقة',
|
|
553
553
|
nextPage: 'الصفحة التالية',
|
|
554
|
+
page: page => `الانتقال إلى الصفحة ${page}`,
|
|
554
555
|
},
|
|
555
556
|
progressBar: {
|
|
556
557
|
label: 'التقدم',
|
|
@@ -597,12 +598,13 @@ const messages$e = {
|
|
|
597
598
|
transferList: {
|
|
598
599
|
sourceLabel: 'المتاح',
|
|
599
600
|
targetLabel: 'المحدد',
|
|
600
|
-
controlsLabel: '
|
|
601
|
+
controlsLabel: 'عناصر التحكم بالنقل',
|
|
601
602
|
moveSelectedToTarget: 'نقل المحدد إلى اليمين',
|
|
602
603
|
moveAllToTarget: 'نقل الكل إلى اليمين',
|
|
603
604
|
moveSelectedToSource: 'نقل المحدد إلى اليسار',
|
|
604
605
|
moveAllToSource: 'نقل الكل إلى اليسار',
|
|
605
606
|
empty: 'لا توجد عناصر',
|
|
607
|
+
moved: (count, listLabel) => `تم نقل ${count} إلى ${listLabel}`,
|
|
606
608
|
},
|
|
607
609
|
validation: {
|
|
608
610
|
required: 'هذا الحقل مطلوب',
|
|
@@ -753,6 +755,7 @@ const messages$d = {
|
|
|
753
755
|
range: (start, end, total) => `${start}–${end} von ${total}`,
|
|
754
756
|
previousPage: 'Vorherige Seite',
|
|
755
757
|
nextPage: 'Nächste Seite',
|
|
758
|
+
page: page => `Zu Seite ${page} wechseln`,
|
|
756
759
|
},
|
|
757
760
|
progressBar: {
|
|
758
761
|
label: 'Fortschritt',
|
|
@@ -805,6 +808,7 @@ const messages$d = {
|
|
|
805
808
|
moveSelectedToSource: 'Ausgewählte nach links verschieben',
|
|
806
809
|
moveAllToSource: 'Alle nach links verschieben',
|
|
807
810
|
empty: 'Keine Einträge',
|
|
811
|
+
moved: (count, listLabel) => `${count} nach ${listLabel} verschoben`,
|
|
808
812
|
},
|
|
809
813
|
validation: {
|
|
810
814
|
required: 'Dieses Feld ist erforderlich',
|
|
@@ -955,6 +959,7 @@ const messages$c = {
|
|
|
955
959
|
range: (start, end, total) => `${start}–${end} από ${total}`,
|
|
956
960
|
previousPage: 'Προηγούμενη σελίδα',
|
|
957
961
|
nextPage: 'Επόμενη σελίδα',
|
|
962
|
+
page: page => `Μετάβαση στη σελίδα ${page}`,
|
|
958
963
|
},
|
|
959
964
|
progressBar: {
|
|
960
965
|
label: 'Πρόοδος',
|
|
@@ -1007,6 +1012,7 @@ const messages$c = {
|
|
|
1007
1012
|
moveSelectedToSource: 'Μεταφορά επιλογής στην πηγή',
|
|
1008
1013
|
moveAllToSource: 'Μεταφορά όλων στην πηγή',
|
|
1009
1014
|
empty: 'Καμία εγγραφή',
|
|
1015
|
+
moved: (count, listLabel) => `Μεταφορά σε ${listLabel}: ${count}`,
|
|
1010
1016
|
},
|
|
1011
1017
|
validation: {
|
|
1012
1018
|
required: 'Αυτό το πεδίο είναι υποχρεωτικό',
|
|
@@ -1157,6 +1163,7 @@ const messages$b = {
|
|
|
1157
1163
|
range: (start, end, total) => `${start}–${end} of ${total}`,
|
|
1158
1164
|
previousPage: 'Previous page',
|
|
1159
1165
|
nextPage: 'Next page',
|
|
1166
|
+
page: page => `Go to page ${page}`,
|
|
1160
1167
|
},
|
|
1161
1168
|
progressBar: {
|
|
1162
1169
|
label: 'Progress',
|
|
@@ -1209,6 +1216,7 @@ const messages$b = {
|
|
|
1209
1216
|
moveSelectedToSource: 'Move selected to source',
|
|
1210
1217
|
moveAllToSource: 'Move all to source',
|
|
1211
1218
|
empty: 'No items',
|
|
1219
|
+
moved: (count, listLabel) => `${count} moved to ${listLabel}`,
|
|
1212
1220
|
},
|
|
1213
1221
|
validation: {
|
|
1214
1222
|
required: 'This field is required',
|
|
@@ -1359,6 +1367,7 @@ const messages$a = {
|
|
|
1359
1367
|
range: (start, end, total) => `${start}–${end} de ${total}`,
|
|
1360
1368
|
previousPage: 'Página anterior',
|
|
1361
1369
|
nextPage: 'Página siguiente',
|
|
1370
|
+
page: page => `Ir a la página ${page}`,
|
|
1362
1371
|
},
|
|
1363
1372
|
progressBar: {
|
|
1364
1373
|
label: 'Progreso',
|
|
@@ -1411,6 +1420,7 @@ const messages$a = {
|
|
|
1411
1420
|
moveSelectedToSource: 'Mover seleccionados al origen',
|
|
1412
1421
|
moveAllToSource: 'Mover todos al origen',
|
|
1413
1422
|
empty: 'Sin elementos',
|
|
1423
|
+
moved: (count, listLabel) => `Movidos a ${listLabel}: ${count}`,
|
|
1414
1424
|
},
|
|
1415
1425
|
validation: {
|
|
1416
1426
|
required: 'Este campo es obligatorio',
|
|
@@ -1561,6 +1571,7 @@ const messages$9 = {
|
|
|
1561
1571
|
range: (start, end, total) => `${start}–${end} sur ${total}`,
|
|
1562
1572
|
previousPage: 'Page précédente',
|
|
1563
1573
|
nextPage: 'Page suivante',
|
|
1574
|
+
page: page => `Aller à la page ${page}`,
|
|
1564
1575
|
},
|
|
1565
1576
|
progressBar: {
|
|
1566
1577
|
label: 'Progression',
|
|
@@ -1613,6 +1624,7 @@ const messages$9 = {
|
|
|
1613
1624
|
moveSelectedToSource: 'Déplacer la sélection vers la source',
|
|
1614
1625
|
moveAllToSource: 'Tout déplacer vers la source',
|
|
1615
1626
|
empty: 'Aucun élément',
|
|
1627
|
+
moved: (count, listLabel) => `${count} déplacés vers ${listLabel}`,
|
|
1616
1628
|
},
|
|
1617
1629
|
validation: {
|
|
1618
1630
|
required: 'Ce champ est obligatoire',
|
|
@@ -1763,6 +1775,7 @@ const messages$8 = {
|
|
|
1763
1775
|
range: (start, end, total) => `${start}–${end} מתוך ${total}`,
|
|
1764
1776
|
previousPage: 'עמוד קודם',
|
|
1765
1777
|
nextPage: 'עמוד הבא',
|
|
1778
|
+
page: page => `מעבר לעמוד ${page}`,
|
|
1766
1779
|
},
|
|
1767
1780
|
progressBar: {
|
|
1768
1781
|
label: 'התקדמות',
|
|
@@ -1815,6 +1828,7 @@ const messages$8 = {
|
|
|
1815
1828
|
moveSelectedToSource: 'העברת הנבחרים למקור',
|
|
1816
1829
|
moveAllToSource: 'העברת הכול למקור',
|
|
1817
1830
|
empty: 'אין פריטים',
|
|
1831
|
+
moved: (count, listLabel) => `העברה אל ${listLabel}: ${count}`,
|
|
1818
1832
|
},
|
|
1819
1833
|
validation: {
|
|
1820
1834
|
required: 'שדה זה הוא חובה',
|
|
@@ -1965,6 +1979,7 @@ const messages$7 = {
|
|
|
1965
1979
|
range: (start, end, total) => `${total} में से ${start}–${end}`,
|
|
1966
1980
|
previousPage: 'पिछला पृष्ठ',
|
|
1967
1981
|
nextPage: 'अगला पृष्ठ',
|
|
1982
|
+
page: page => `पृष्ठ ${page} पर जाएँ`,
|
|
1968
1983
|
},
|
|
1969
1984
|
progressBar: {
|
|
1970
1985
|
label: 'प्रगति',
|
|
@@ -2017,6 +2032,7 @@ const messages$7 = {
|
|
|
2017
2032
|
moveSelectedToSource: 'चयनित को स्रोत में ले जाएं',
|
|
2018
2033
|
moveAllToSource: 'सभी को स्रोत में ले जाएं',
|
|
2019
2034
|
empty: 'कोई आइटम नहीं',
|
|
2035
|
+
moved: (count, listLabel) => `${count} को ${listLabel} में ले जाया गया`,
|
|
2020
2036
|
},
|
|
2021
2037
|
validation: {
|
|
2022
2038
|
required: 'यह फ़ील्ड आवश्यक है',
|
|
@@ -2167,6 +2183,7 @@ const messages$6 = {
|
|
|
2167
2183
|
range: (start, end, total) => `${start}–${end} af ${total}`,
|
|
2168
2184
|
previousPage: 'Fyrri síða',
|
|
2169
2185
|
nextPage: 'Næsta síða',
|
|
2186
|
+
page: page => `Fara á síðu ${page}`,
|
|
2170
2187
|
},
|
|
2171
2188
|
progressBar: {
|
|
2172
2189
|
label: 'Framvinda',
|
|
@@ -2219,6 +2236,7 @@ const messages$6 = {
|
|
|
2219
2236
|
moveSelectedToSource: 'Færa valið til baka',
|
|
2220
2237
|
moveAllToSource: 'Færa allt til baka',
|
|
2221
2238
|
empty: 'Engin atriði',
|
|
2239
|
+
moved: (count, listLabel) => `Flutt í ${listLabel}: ${count}`,
|
|
2222
2240
|
},
|
|
2223
2241
|
validation: {
|
|
2224
2242
|
required: 'Þennan reit þarf að fylla út',
|
|
@@ -2369,6 +2387,7 @@ const messages$5 = {
|
|
|
2369
2387
|
range: (start, end, total) => `${start}–${end} van ${total}`,
|
|
2370
2388
|
previousPage: 'Vorige pagina',
|
|
2371
2389
|
nextPage: 'Volgende pagina',
|
|
2390
|
+
page: page => `Ga naar pagina ${page}`,
|
|
2372
2391
|
},
|
|
2373
2392
|
progressBar: {
|
|
2374
2393
|
label: 'Voortgang',
|
|
@@ -2421,6 +2440,7 @@ const messages$5 = {
|
|
|
2421
2440
|
moveSelectedToSource: 'Selectie naar links verplaatsen',
|
|
2422
2441
|
moveAllToSource: 'Alles naar links verplaatsen',
|
|
2423
2442
|
empty: 'Geen items',
|
|
2443
|
+
moved: (count, listLabel) => `${count} verplaatst naar ${listLabel}`,
|
|
2424
2444
|
},
|
|
2425
2445
|
validation: {
|
|
2426
2446
|
required: 'Dit veld is verplicht',
|
|
@@ -2571,6 +2591,7 @@ const messages$4 = {
|
|
|
2571
2591
|
range: (start, end, total) => `${start}–${end} z ${total}`,
|
|
2572
2592
|
previousPage: 'Poprzednia strona',
|
|
2573
2593
|
nextPage: 'Następna strona',
|
|
2594
|
+
page: page => `Przejdź do strony ${page}`,
|
|
2574
2595
|
},
|
|
2575
2596
|
progressBar: {
|
|
2576
2597
|
label: 'Postęp',
|
|
@@ -2623,6 +2644,7 @@ const messages$4 = {
|
|
|
2623
2644
|
moveSelectedToSource: 'Przenieś zaznaczone do źródła',
|
|
2624
2645
|
moveAllToSource: 'Przenieś wszystko do źródła',
|
|
2625
2646
|
empty: 'Brak elementów',
|
|
2647
|
+
moved: (count, listLabel) => `Przeniesiono ${count} do listy „${listLabel}”`,
|
|
2626
2648
|
},
|
|
2627
2649
|
validation: {
|
|
2628
2650
|
required: 'To pole jest wymagane',
|
|
@@ -2773,6 +2795,7 @@ const messages$3 = {
|
|
|
2773
2795
|
range: (start, end, total) => `${start}–${end} de ${total}`,
|
|
2774
2796
|
previousPage: 'Página anterior',
|
|
2775
2797
|
nextPage: 'Próxima página',
|
|
2798
|
+
page: page => `Ir para a página ${page}`,
|
|
2776
2799
|
},
|
|
2777
2800
|
progressBar: {
|
|
2778
2801
|
label: 'Progresso',
|
|
@@ -2825,6 +2848,7 @@ const messages$3 = {
|
|
|
2825
2848
|
moveSelectedToSource: 'Mover selecionados para a origem',
|
|
2826
2849
|
moveAllToSource: 'Mover todos para a origem',
|
|
2827
2850
|
empty: 'Nenhum item',
|
|
2851
|
+
moved: (count, listLabel) => `Movidos para ${listLabel}: ${count}`,
|
|
2828
2852
|
},
|
|
2829
2853
|
validation: {
|
|
2830
2854
|
required: 'Este campo é obrigatório',
|
|
@@ -2975,6 +2999,7 @@ const messages$2 = {
|
|
|
2975
2999
|
range: (start, end, total) => `${start}–${end} из ${total}`,
|
|
2976
3000
|
previousPage: 'Предыдущая страница',
|
|
2977
3001
|
nextPage: 'Следующая страница',
|
|
3002
|
+
page: page => `Перейти на страницу ${page}`,
|
|
2978
3003
|
},
|
|
2979
3004
|
progressBar: {
|
|
2980
3005
|
label: 'Прогресс',
|
|
@@ -3027,6 +3052,7 @@ const messages$2 = {
|
|
|
3027
3052
|
moveSelectedToSource: 'Переместить выбранное влево',
|
|
3028
3053
|
moveAllToSource: 'Переместить все влево',
|
|
3029
3054
|
empty: 'Нет элементов',
|
|
3055
|
+
moved: (count, listLabel) => `Перемещено ${count} в список «${listLabel}»`,
|
|
3030
3056
|
},
|
|
3031
3057
|
validation: {
|
|
3032
3058
|
required: 'Это поле обязательно для заполнения',
|
|
@@ -3177,6 +3203,7 @@ const messages$1 = {
|
|
|
3177
3203
|
range: (start, end, total) => `${start}–${end} з ${total}`,
|
|
3178
3204
|
previousPage: 'Попередня сторінка',
|
|
3179
3205
|
nextPage: 'Наступна сторінка',
|
|
3206
|
+
page: page => `Перейти на сторінку ${page}`,
|
|
3180
3207
|
},
|
|
3181
3208
|
progressBar: {
|
|
3182
3209
|
label: 'Прогрес',
|
|
@@ -3229,6 +3256,7 @@ const messages$1 = {
|
|
|
3229
3256
|
moveSelectedToSource: 'Перенести вибрані вліво',
|
|
3230
3257
|
moveAllToSource: 'Перенести все вліво',
|
|
3231
3258
|
empty: 'Немає елементів',
|
|
3259
|
+
moved: (count, listLabel) => `Переміщено ${count} до списку «${listLabel}»`,
|
|
3232
3260
|
},
|
|
3233
3261
|
validation: {
|
|
3234
3262
|
required: 'Це поле обов’язкове',
|
|
@@ -3379,6 +3407,7 @@ const messages = {
|
|
|
3379
3407
|
range: (start, end, total) => `共 ${total} 项中的 ${start}–${end}`,
|
|
3380
3408
|
previousPage: '上一页',
|
|
3381
3409
|
nextPage: '下一页',
|
|
3410
|
+
page: page => `转到第 ${page} 页`,
|
|
3382
3411
|
},
|
|
3383
3412
|
progressBar: {
|
|
3384
3413
|
label: '进度',
|
|
@@ -3431,6 +3460,7 @@ const messages = {
|
|
|
3431
3460
|
moveSelectedToSource: '将所选项移至左侧',
|
|
3432
3461
|
moveAllToSource: '将全部移至左侧',
|
|
3433
3462
|
empty: '无项目',
|
|
3463
|
+
moved: (count, listLabel) => `已将 ${count} 项移至 ${listLabel}`,
|
|
3434
3464
|
},
|
|
3435
3465
|
validation: {
|
|
3436
3466
|
required: '此字段为必填项',
|
|
@@ -4922,7 +4952,7 @@ class AutocompleteComponent {
|
|
|
4922
4952
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
4923
4953
|
multi: true,
|
|
4924
4954
|
},
|
|
4925
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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.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 (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + i\"\n [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.label === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (mousedown)=\"selectOption(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\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", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--
|
|
4955
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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.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 (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + i\"\n [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.label === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (mousedown)=\"selectOption(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\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", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.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{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.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:var(--space-1) 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--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__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:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4926
4956
|
}
|
|
4927
4957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
4928
4958
|
type: Component,
|
|
@@ -4932,7 +4962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
4932
4962
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
4933
4963
|
multi: true,
|
|
4934
4964
|
},
|
|
4935
|
-
], template: "<div class=\"ea-autocomplete\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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.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 (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + i\"\n [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.label === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (mousedown)=\"selectOption(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\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", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--
|
|
4965
|
+
], template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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.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 (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + i\"\n [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n [attr.aria-selected]=\"option.label === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (mousedown)=\"selectOption(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\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", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.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{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.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:var(--space-1) 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--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__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:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"] }]
|
|
4936
4966
|
}], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
4937
4967
|
|
|
4938
4968
|
class CameraIconComponent extends IconComponentBase {
|
|
@@ -5355,6 +5385,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
5355
5385
|
args: [{ selector: 'ea-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ea-skeleton\"\n [class.ea-skeleton--text]=\"variant() === 'text'\"\n [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n [class.ea-skeleton--animated]=\"animated()\"\n [style]=\"hostStyles()\"\n aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"] }]
|
|
5356
5386
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
|
|
5357
5387
|
|
|
5388
|
+
// Elements that carry their own interactive semantics, so ARIA state applies
|
|
5389
|
+
// to them directly rather than to a wrapper around them.
|
|
5390
|
+
const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, summary, [role]:not([role="none"]):not([role="presentation"])';
|
|
5391
|
+
/**
|
|
5392
|
+
* Resolves the element that should carry ARIA state a directive applies to its
|
|
5393
|
+
* host. A component wrapper such as `<ea-button>` is a roleless custom element,
|
|
5394
|
+
* so attributes left on it are never announced; they belong on the interactive
|
|
5395
|
+
* element the component renders inside. Falls back to the host when it exposes
|
|
5396
|
+
* no inner control.
|
|
5397
|
+
*/
|
|
5398
|
+
function resolveAriaTarget(host) {
|
|
5399
|
+
if (host.matches(INTERACTIVE_SELECTOR)) {
|
|
5400
|
+
return host;
|
|
5401
|
+
}
|
|
5402
|
+
return host.querySelector(INTERACTIVE_SELECTOR) ?? host;
|
|
5403
|
+
}
|
|
5404
|
+
|
|
5358
5405
|
/**
|
|
5359
5406
|
* Attaches a positioned tooltip to its host element. Shows on hover and
|
|
5360
5407
|
* focus, hides on leave/blur or Escape, and wires up `aria-describedby` so
|
|
@@ -5563,7 +5610,7 @@ class TooltipDirective {
|
|
|
5563
5610
|
this.resizeObserver = null;
|
|
5564
5611
|
}
|
|
5565
5612
|
appendDescribedBy() {
|
|
5566
|
-
const native = this.el.nativeElement;
|
|
5613
|
+
const native = resolveAriaTarget(this.el.nativeElement);
|
|
5567
5614
|
const existing = (native.getAttribute('aria-describedby') ?? '').trim();
|
|
5568
5615
|
const tokens = existing ? existing.split(/\s+/) : [];
|
|
5569
5616
|
if (!tokens.includes(this.tooltipId)) {
|
|
@@ -5572,7 +5619,7 @@ class TooltipDirective {
|
|
|
5572
5619
|
this.renderer.setAttribute(native, 'aria-describedby', tokens.join(' '));
|
|
5573
5620
|
}
|
|
5574
5621
|
removeDescribedBy() {
|
|
5575
|
-
const native = this.el.nativeElement;
|
|
5622
|
+
const native = resolveAriaTarget(this.el.nativeElement);
|
|
5576
5623
|
const existing = (native.getAttribute('aria-describedby') ?? '').trim();
|
|
5577
5624
|
const tokens = existing.split(/\s+/).filter((t) => t && t !== this.tooltipId);
|
|
5578
5625
|
if (tokens.length) {
|
|
@@ -5713,8 +5760,6 @@ class AvatarEditorComponent {
|
|
|
5713
5760
|
[`ea-avatar-editor--${this.shape()}`]: true,
|
|
5714
5761
|
'ea-avatar-editor--has-image': this.hasImage(),
|
|
5715
5762
|
'ea-avatar-editor--drag-over': this.isDragOver(),
|
|
5716
|
-
'ea-avatar-editor--compact': this.canvasSize() <= 150,
|
|
5717
|
-
'ea-avatar-editor--ultra-compact': this.canvasSize() <= 100,
|
|
5718
5763
|
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
5719
5764
|
injector = inject(Injector);
|
|
5720
5765
|
boundWheel = (e) => this.onWheel(e);
|
|
@@ -6227,7 +6272,7 @@ class AvatarEditorComponent {
|
|
|
6227
6272
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
6228
6273
|
}
|
|
6229
6274
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6230
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n [id]=\"instructionsId\">\n {{ i18n.messages().avatarEditor.canvasInstructions }}\n </span>\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n role=\"alert\">\n {{ lastError() }}\n </span>\n\n @if (!hasImage() && !isLoading()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\">\n {{ i18n.messages().avatarEditor.dropzone }}\n </span>\n </button>\n }\n\n @if (hasImage() || isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n [attr.aria-busy]=\"isLoading() || null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n @if (isLoading()) {\n <ea-skeleton\n [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n [width]=\"canvasSize() + 'px'\"\n [height]=\"canvasSize() + 'px'\" />\n }\n\n @if (hasImage()) {\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n [attr.aria-describedby]=\"instructionsId\"\n [style.display]=\"isLoading() ? 'none' : 'block'\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n @if (!isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-overlay\"\n [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>{{ i18n.messages().avatarEditor.change }}</span>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n [disabled]=\"!canRevert() || isLoading()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage() || isLoading()\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n [disabled]=\"!hasImage() || isLoading()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{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-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-avatar-editor-canvas.px]=\"canvasSize()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n [id]=\"instructionsId\">\n {{ i18n.messages().avatarEditor.canvasInstructions }}\n </span>\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n role=\"alert\">\n {{ lastError() }}\n </span>\n\n @if (!hasImage() && !isLoading()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\">\n {{ i18n.messages().avatarEditor.dropzone }}\n </span>\n </button>\n }\n\n @if (hasImage() || isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n [attr.aria-busy]=\"isLoading() || null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n @if (isLoading()) {\n <ea-skeleton\n [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n [width]=\"canvasSize() + 'px'\"\n [height]=\"canvasSize() + 'px'\" />\n }\n\n @if (hasImage()) {\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n [attr.aria-describedby]=\"instructionsId\"\n [style.display]=\"isLoading() ? 'none' : 'block'\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n @if (!isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-overlay\"\n [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>{{ i18n.messages().avatarEditor.change }}</span>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n [disabled]=\"!canRevert() || isLoading()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage() || isLoading()\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n [disabled]=\"!hasImage() || isLoading()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:.75em;font-family:var(--font-family-sans);font-size:clamp(.625rem,var(--ea-avatar-editor-canvas, 200px) * .075,.875rem)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{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-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:1em;font-family:inherit;font-size:inherit;line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:2.25em;height:2.25em;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:1.75em;height:1.75em}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:.5em}.ea-avatar-editor__icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:8em;height:.3em;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1.15em;height:1.15em;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1.15em;height:1.15em;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6231
6276
|
}
|
|
6232
6277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AvatarEditorComponent, decorators: [{
|
|
6233
6278
|
type: Component,
|
|
@@ -6241,7 +6286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
6241
6286
|
TooltipDirective,
|
|
6242
6287
|
TrashIconComponent,
|
|
6243
6288
|
UploadIconComponent,
|
|
6244
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n [id]=\"instructionsId\">\n {{ i18n.messages().avatarEditor.canvasInstructions }}\n </span>\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n role=\"alert\">\n {{ lastError() }}\n </span>\n\n @if (!hasImage() && !isLoading()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\">\n {{ i18n.messages().avatarEditor.dropzone }}\n </span>\n </button>\n }\n\n @if (hasImage() || isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n [attr.aria-busy]=\"isLoading() || null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n @if (isLoading()) {\n <ea-skeleton\n [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n [width]=\"canvasSize() + 'px'\"\n [height]=\"canvasSize() + 'px'\" />\n }\n\n @if (hasImage()) {\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n [attr.aria-describedby]=\"instructionsId\"\n [style.display]=\"isLoading() ? 'none' : 'block'\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n @if (!isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-overlay\"\n [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>{{ i18n.messages().avatarEditor.change }}</span>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n [disabled]=\"!canRevert() || isLoading()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage() || isLoading()\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n [disabled]=\"!hasImage() || isLoading()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--
|
|
6289
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-avatar-editor-canvas.px]=\"canvasSize()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n [id]=\"instructionsId\">\n {{ i18n.messages().avatarEditor.canvasInstructions }}\n </span>\n\n <span\n class=\"ea-avatar-editor__visually-hidden\"\n role=\"alert\">\n {{ lastError() }}\n </span>\n\n @if (!hasImage() && !isLoading()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\">\n {{ i18n.messages().avatarEditor.dropzone }}\n </span>\n </button>\n }\n\n @if (hasImage() || isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n [attr.aria-busy]=\"isLoading() || null\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n @if (isLoading()) {\n <ea-skeleton\n [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n [width]=\"canvasSize() + 'px'\"\n [height]=\"canvasSize() + 'px'\" />\n }\n\n @if (hasImage()) {\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n [attr.aria-describedby]=\"instructionsId\"\n [style.display]=\"isLoading() ? 'none' : 'block'\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n @if (!isLoading()) {\n <div\n class=\"ea-avatar-editor__canvas-overlay\"\n [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>{{ i18n.messages().avatarEditor.change }}</span>\n </div>\n }\n }\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n [disabled]=\"!canRevert() || isLoading()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage() || isLoading()\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n [disabled]=\"!hasImage() || isLoading()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:.75em;font-family:var(--font-family-sans);font-size:clamp(.625rem,var(--ea-avatar-editor-canvas, 200px) * .075,.875rem)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{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-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:1em;font-family:inherit;font-size:inherit;line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:2.25em;height:2.25em;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:1.75em;height:1.75em}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:.5em}.ea-avatar-editor__icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:8em;height:.3em;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1.15em;height:1.15em;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1.15em;height:1.15em;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
6245
6290
|
}], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], errored: [{ type: i0.Output, args: ["errored"] }], cropStateChanged: [{ type: i0.Output, args: ["cropStateChanged"] }] } });
|
|
6246
6291
|
|
|
6247
6292
|
class UserIconComponent extends IconComponentBase {
|
|
@@ -6612,7 +6657,7 @@ class CheckboxComponent {
|
|
|
6612
6657
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
6613
6658
|
multi: true,
|
|
6614
6659
|
},
|
|
6615
|
-
], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n <label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span\n class=\"ea-checkbox__label\"\n [class.ea-checkbox__label--required]=\"required()\">\n {{ label() }}\n @if (count() !== undefined && count() !== null) {\n <span class=\"ea-checkbox__count\">{{ count() }}</span>\n }\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap
|
|
6660
|
+
], ngImport: i0, template: "<div class=\"ea-checkbox-field ea-checkbox-field--{{ size() }}\">\n <label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span\n class=\"ea-checkbox__label\"\n [class.ea-checkbox__label--required]=\"required()\">\n {{ label() }}\n @if (count() !== undefined && count() !== null) {\n <span class=\"ea-checkbox__count\">{{ count() }}</span>\n }\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-checkbox-field--xs{font-size:var(--font-size-xs)}.ea-checkbox-field--sm{font-size:var(--font-size-sm)}.ea-checkbox-field--md{font-size:var(--font-size-md)}.ea-checkbox-field--lg{font-size:var(--font-size-lg)}.ea-checkbox-field--xl{font-size:var(--font-size-xl)}.ea-checkbox{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-checkbox__input:focus-visible+.ea-checkbox__box{outline:2px solid Highlight;outline-offset:2px}}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:1.25em;height:1.25em;border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular);color:var(--ea-checkbox-label-color, inherit);transition:color var(--duration-fast) var(--ease-out)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-inline-start:.25em;color:var(--ea-checkbox-count-color, var(--color-text-tertiary));transition:color var(--duration-fast) var(--ease-out)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6616
6661
|
}
|
|
6617
6662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
6618
6663
|
type: Component,
|
|
@@ -6622,7 +6667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
6622
6667
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
6623
6668
|
multi: true,
|
|
6624
6669
|
},
|
|
6625
|
-
], template: "<div class=\"ea-checkbox-field\">\n <label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span\n class=\"ea-checkbox__label\"\n [class.ea-checkbox__label--required]=\"required()\">\n {{ label() }}\n @if (count() !== undefined && count() !== null) {\n <span class=\"ea-checkbox__count\">{{ count() }}</span>\n }\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap
|
|
6670
|
+
], template: "<div class=\"ea-checkbox-field ea-checkbox-field--{{ size() }}\">\n <label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span\n class=\"ea-checkbox__label\"\n [class.ea-checkbox__label--required]=\"required()\">\n {{ label() }}\n @if (count() !== undefined && count() !== null) {\n <span class=\"ea-checkbox__count\">{{ count() }}</span>\n }\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-checkbox-field--xs{font-size:var(--font-size-xs)}.ea-checkbox-field--sm{font-size:var(--font-size-sm)}.ea-checkbox-field--md{font-size:var(--font-size-md)}.ea-checkbox-field--lg{font-size:var(--font-size-lg)}.ea-checkbox-field--xl{font-size:var(--font-size-xl)}.ea-checkbox{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-checkbox__input:focus-visible+.ea-checkbox__box{outline:2px solid Highlight;outline-offset:2px}}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:1.25em;height:1.25em;border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular);color:var(--ea-checkbox-label-color, inherit);transition:color var(--duration-fast) var(--ease-out)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-inline-start:.25em;color:var(--ea-checkbox-count-color, var(--color-text-tertiary));transition:color var(--duration-fast) var(--ease-out)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"] }]
|
|
6626
6671
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
6627
6672
|
|
|
6628
6673
|
class SearchIconComponent extends IconComponentBase {
|
|
@@ -7623,7 +7668,7 @@ class ColorPickerComponent {
|
|
|
7623
7668
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
7624
7669
|
multi: true,
|
|
7625
7670
|
},
|
|
7626
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.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--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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7671
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.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--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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7627
7672
|
}
|
|
7628
7673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
7629
7674
|
type: Component,
|
|
@@ -7640,7 +7685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
7640
7685
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
7641
7686
|
multi: true,
|
|
7642
7687
|
},
|
|
7643
|
-
], template: "<div class=\"ea-color-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.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--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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
|
|
7688
|
+
], 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 [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (clearable() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"application\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.background-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"value() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.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--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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
|
|
7644
7689
|
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
7645
7690
|
function clamp01(n) {
|
|
7646
7691
|
return Math.min(1, Math.max(0, n));
|
|
@@ -8086,6 +8131,10 @@ class DataTableComponent {
|
|
|
8086
8131
|
static PAGE_JUMP = 10;
|
|
8087
8132
|
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
8088
8133
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
8134
|
+
/** Accessible name for the table, announced when it takes focus as a grid. */
|
|
8135
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
8136
|
+
/** Visible caption rendered above the table; also names it for assistive technology. */
|
|
8137
|
+
caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
8089
8138
|
trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
|
|
8090
8139
|
density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
8091
8140
|
/** Visual size of the table; density paddings and icons scale with it. */
|
|
@@ -8299,7 +8348,7 @@ class DataTableComponent {
|
|
|
8299
8348
|
?.focus();
|
|
8300
8349
|
}
|
|
8301
8350
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n (keydown)=\"onGridKeydown($event)\">\n @if (caption(); as captionText) {\n <caption class=\"ea-data-table__caption\">\n {{ captionText }}\n </caption>\n }\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:var(--space-2) var(--space-3);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8303
8352
|
}
|
|
8304
8353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
8305
8354
|
type: Component,
|
|
@@ -8309,8 +8358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
8309
8358
|
ChevronsUpDownIconComponent,
|
|
8310
8359
|
NgClass,
|
|
8311
8360
|
NgTemplateOutlet,
|
|
8312
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
8313
|
-
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
8361
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n (keydown)=\"onGridKeydown($event)\">\n @if (caption(); as captionText) {\n <caption class=\"ea-data-table__caption\">\n {{ captionText }}\n </caption>\n }\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:var(--space-2) var(--space-3);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
8362
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
8314
8363
|
|
|
8315
8364
|
/**
|
|
8316
8365
|
* Verification code entry made up of one input per digit. Auto-advances on
|
|
@@ -8469,7 +8518,7 @@ class CodeInputComponent {
|
|
|
8469
8518
|
useExisting: forwardRef(() => CodeInputComponent),
|
|
8470
8519
|
multi: true,
|
|
8471
8520
|
},
|
|
8472
|
-
], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\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\"\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", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap
|
|
8521
|
+
], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\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\"\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", 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--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(--space-2)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;width:2.5em;height:3em;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8473
8522
|
}
|
|
8474
8523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CodeInputComponent, decorators: [{
|
|
8475
8524
|
type: Component,
|
|
@@ -8479,7 +8528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
8479
8528
|
useExisting: forwardRef(() => CodeInputComponent),
|
|
8480
8529
|
multi: true,
|
|
8481
8530
|
},
|
|
8482
|
-
], template: "<div class=\"ea-code-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\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\"\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", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap
|
|
8531
|
+
], 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 [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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\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\"\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", 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--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(--space-2)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;width:2.5em;height:3em;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
8483
8532
|
}], propDecorators: { digitEls: [{ type: i0.ViewChildren, args: ['digitEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], allowAllChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAllChars", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
8484
8533
|
|
|
8485
8534
|
class CalendarIconComponent extends IconComponentBase {
|
|
@@ -9059,7 +9108,7 @@ class DatePickerComponent {
|
|
|
9059
9108
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
9060
9109
|
multi: true,
|
|
9061
9110
|
},
|
|
9062
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <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", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9111
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <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", 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--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,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9063
9112
|
}
|
|
9064
9113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
9065
9114
|
type: Component,
|
|
@@ -9078,7 +9127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
9078
9127
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
9079
9128
|
multi: true,
|
|
9080
9129
|
},
|
|
9081
|
-
], template: "<div class=\"ea-date-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <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", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
|
|
9130
|
+
], 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 [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n class=\"ea-date-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-date-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\">\n <ea-icon-calendar\n class=\"ea-date-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span\n class=\"ea-date-picker__trigger-value\"\n [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <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", 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--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,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
|
|
9082
9131
|
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
9083
9132
|
|
|
9084
9133
|
/**
|
|
@@ -9572,11 +9621,11 @@ class DrawerComponent {
|
|
|
9572
9621
|
}
|
|
9573
9622
|
}
|
|
9574
9623
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--xs,.ea-drawer__panel--left.ea-drawer__panel--xs,.ea-drawer__panel--start.ea-drawer__panel--xs,.ea-drawer__panel--end.ea-drawer__panel--xs{width:16rem}.ea-drawer__panel--right.ea-drawer__panel--sm,.ea-drawer__panel--left.ea-drawer__panel--sm,.ea-drawer__panel--start.ea-drawer__panel--sm,.ea-drawer__panel--end.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md,.ea-drawer__panel--left.ea-drawer__panel--md,.ea-drawer__panel--start.ea-drawer__panel--md,.ea-drawer__panel--end.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg,.ea-drawer__panel--left.ea-drawer__panel--lg,.ea-drawer__panel--start.ea-drawer__panel--lg,.ea-drawer__panel--end.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--xl,.ea-drawer__panel--left.ea-drawer__panel--xl,.ea-drawer__panel--start.ea-drawer__panel--xl,.ea-drawer__panel--end.ea-drawer__panel--xl{width:44rem}.ea-drawer__panel--right.ea-drawer__panel--full,.ea-drawer__panel--left.ea-drawer__panel--full,.ea-drawer__panel--start.ea-drawer__panel--full,.ea-drawer__panel--end.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);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-drawer__close>*{font-size:1.25em}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);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-drawer__close>*{font-size:1.25em}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9576
9625
|
}
|
|
9577
9626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
9578
9627
|
type: Component,
|
|
9579
|
-
args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--
|
|
9628
|
+
args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);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-drawer__close>*{font-size:1.25em}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
|
|
9580
9629
|
}], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['panelEl', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pushTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushTarget", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
9581
9630
|
|
|
9582
9631
|
/**
|
|
@@ -9658,8 +9707,15 @@ class DropdownComponent {
|
|
|
9658
9707
|
}
|
|
9659
9708
|
this.isOpen.set(!this.isOpen());
|
|
9660
9709
|
if (this.isOpen()) {
|
|
9661
|
-
const
|
|
9662
|
-
|
|
9710
|
+
const selected = this.options().findIndex(o => o.value === this.value());
|
|
9711
|
+
if (selected >= 0) {
|
|
9712
|
+
this.focusedIndex.set(selected);
|
|
9713
|
+
}
|
|
9714
|
+
else {
|
|
9715
|
+
// Falling back to index 0 would point the active descendant at a
|
|
9716
|
+
// disabled first option, so walk to the first selectable one instead
|
|
9717
|
+
this.focusEdge(1);
|
|
9718
|
+
}
|
|
9663
9719
|
}
|
|
9664
9720
|
}
|
|
9665
9721
|
/** Programmatically selects the given option, closing the list. */
|
|
@@ -9825,7 +9881,7 @@ class DropdownComponent {
|
|
|
9825
9881
|
useExisting: forwardRef(() => DropdownComponent),
|
|
9826
9882
|
multi: true,
|
|
9827
9883
|
},
|
|
9828
|
-
], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-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() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (option of options(); track option.value; let i = $index) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--
|
|
9884
|
+
], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-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() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (option of options(); track option.value; let i = $index) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{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{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior: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-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.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__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:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9829
9885
|
}
|
|
9830
9886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
9831
9887
|
type: Component,
|
|
@@ -9841,7 +9897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
9841
9897
|
useExisting: forwardRef(() => DropdownComponent),
|
|
9842
9898
|
multi: true,
|
|
9843
9899
|
},
|
|
9844
|
-
], template: "<div class=\"ea-dropdown-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-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() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (option of options(); track option.value; let i = $index) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--
|
|
9900
|
+
], template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-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() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (option of options(); track option.value; let i = $index) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{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{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior: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-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.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__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:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"] }]
|
|
9845
9901
|
}], ctorParameters: () => [], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
9846
9902
|
|
|
9847
9903
|
class EagamiIconComponent extends IconComponentBase {
|
|
@@ -11227,7 +11283,7 @@ class FileUploaderComponent {
|
|
|
11227
11283
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
11228
11284
|
multi: true,
|
|
11229
11285
|
},
|
|
11230
|
-
], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\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 <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\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 @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", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:
|
|
11286
|
+
], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\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 <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\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 @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", 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--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:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;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(--color-brand-subtle);color: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__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:var(--space-1);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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11231
11287
|
}
|
|
11232
11288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
11233
11289
|
type: Component,
|
|
@@ -11249,7 +11305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
11249
11305
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
11250
11306
|
multi: true,
|
|
11251
11307
|
},
|
|
11252
|
-
], template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\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 <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\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 @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", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:
|
|
11308
|
+
], template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\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 <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [attr.aria-required]=\"required() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\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 @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", 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--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:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;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(--color-brand-subtle);color: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__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:var(--space-1);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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
|
|
11253
11309
|
}], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
|
|
11254
11310
|
const ARCHIVE_MIMES = new Set([
|
|
11255
11311
|
'application/zip',
|
|
@@ -11461,6 +11517,8 @@ class InputComponent {
|
|
|
11461
11517
|
i18n = inject(EagamiI18nService);
|
|
11462
11518
|
/** Text label rendered above the field. */
|
|
11463
11519
|
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
11520
|
+
/** Accessible name for the control when no visible `label` is set. */
|
|
11521
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
11464
11522
|
/** Native input type; `password` adds a built-in show/hide toggle. */
|
|
11465
11523
|
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
11466
11524
|
/** Placeholder shown while the field is empty. */
|
|
@@ -11664,13 +11722,13 @@ class InputComponent {
|
|
|
11664
11722
|
this.inputEl()?.nativeElement.focus();
|
|
11665
11723
|
}
|
|
11666
11724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11667
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
11725
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
11668
11726
|
{
|
|
11669
11727
|
provide: NG_VALUE_ACCESSOR,
|
|
11670
11728
|
useExisting: forwardRef(() => InputComponent),
|
|
11671
11729
|
multi: true,
|
|
11672
11730
|
},
|
|
11673
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 (!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.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.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", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--
|
|
11731
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 (!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.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.aria-label]=\"label() ? null : (ariaLabel() ?? 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", 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--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(--color-border-focus);box-shadow: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{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:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;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{color:var(--color-text-tertiary);opacity:1}.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:not-allowed}.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"], dependencies: [{ kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11674
11732
|
}
|
|
11675
11733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InputComponent, decorators: [{
|
|
11676
11734
|
type: Component,
|
|
@@ -11688,8 +11746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
11688
11746
|
useExisting: forwardRef(() => InputComponent),
|
|
11689
11747
|
multi: true,
|
|
11690
11748
|
},
|
|
11691
|
-
], template: "<div class=\"ea-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 (!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.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.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", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--
|
|
11692
|
-
}], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
11749
|
+
], template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 (!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.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.aria-label]=\"label() ? null : (ariaLabel() ?? 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", 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--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(--color-border-focus);box-shadow: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{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:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@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:not-allowed;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{color:var(--color-text-tertiary);opacity:1}.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:not-allowed}.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"] }]
|
|
11750
|
+
}], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
11693
11751
|
|
|
11694
11752
|
/**
|
|
11695
11753
|
* Popup action menu attached to any focusable element via the
|
|
@@ -11902,7 +11960,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
11902
11960
|
*/
|
|
11903
11961
|
class MenuTriggerDirective {
|
|
11904
11962
|
el = inject((ElementRef));
|
|
11963
|
+
renderer = inject(Renderer2);
|
|
11905
11964
|
menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'eaMenuTrigger' });
|
|
11965
|
+
constructor() {
|
|
11966
|
+
effect(() => {
|
|
11967
|
+
const menu = this.menu();
|
|
11968
|
+
const open = menu?.open() ?? false;
|
|
11969
|
+
const controls = menu?.id() ?? null;
|
|
11970
|
+
const target = resolveAriaTarget(this.el.nativeElement);
|
|
11971
|
+
this.renderer.setAttribute(target, 'aria-haspopup', 'menu');
|
|
11972
|
+
this.renderer.setAttribute(target, 'aria-expanded', String(open));
|
|
11973
|
+
if (controls) {
|
|
11974
|
+
this.renderer.setAttribute(target, 'aria-controls', controls);
|
|
11975
|
+
}
|
|
11976
|
+
else {
|
|
11977
|
+
this.renderer.removeAttribute(target, 'aria-controls');
|
|
11978
|
+
}
|
|
11979
|
+
});
|
|
11980
|
+
}
|
|
11906
11981
|
handleClick() {
|
|
11907
11982
|
const m = this.menu();
|
|
11908
11983
|
if (m.disabled()) {
|
|
@@ -11927,21 +12002,18 @@ class MenuTriggerDirective {
|
|
|
11927
12002
|
}
|
|
11928
12003
|
}
|
|
11929
12004
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11930
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }
|
|
12005
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" } }, ngImport: i0 });
|
|
11931
12006
|
}
|
|
11932
12007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
11933
12008
|
type: Directive,
|
|
11934
12009
|
args: [{
|
|
11935
12010
|
selector: '[eaMenuTrigger]',
|
|
11936
12011
|
host: {
|
|
11937
|
-
'[attr.aria-haspopup]': '"menu"',
|
|
11938
|
-
'[attr.aria-expanded]': 'menu()?.open() ?? false',
|
|
11939
|
-
'[attr.aria-controls]': 'menu()?.id() ?? null',
|
|
11940
12012
|
'(click)': 'handleClick()',
|
|
11941
12013
|
'(keydown)': 'handleKeydown($event)',
|
|
11942
12014
|
},
|
|
11943
12015
|
}]
|
|
11944
|
-
}], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
|
|
12016
|
+
}], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
|
|
11945
12017
|
|
|
11946
12018
|
/**
|
|
11947
12019
|
* Inline label commonly used to represent filters, categories, or selected
|
|
@@ -11956,6 +12028,12 @@ class TagComponent {
|
|
|
11956
12028
|
removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
|
|
11957
12029
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11958
12030
|
removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
|
|
12031
|
+
/**
|
|
12032
|
+
* Whether the remove button is a tab stop. Set `false` inside a composite
|
|
12033
|
+
* widget (a combobox trigger, a grid cell) whose own keyboard model owns
|
|
12034
|
+
* navigation, since roles like `combobox` forbid focusable descendants.
|
|
12035
|
+
*/
|
|
12036
|
+
removeTabbable = input(true, ...(ngDevMode ? [{ debugName: "removeTabbable" }] : /* istanbul ignore next */ []));
|
|
11959
12037
|
/** Fires when the user activates the remove button on a `removable` tag. */
|
|
11960
12038
|
removed = output();
|
|
11961
12039
|
/** Accessible label for the remove button, falling back to the active locale. */
|
|
@@ -11970,12 +12048,12 @@ class TagComponent {
|
|
|
11970
12048
|
this.removed.emit();
|
|
11971
12049
|
}
|
|
11972
12050
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11973
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"resolvedRemoveLabel()\"\n (click)=\"onRemove($event)\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabbable: { classPropertyName: "removeTabbable", publicName: "removeTabbable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n [attr.tabindex]=\"removeTabbable() ? null : -1\"\n [attr.aria-label]=\"resolvedRemoveLabel()\"\n (click)=\"onRemove($event)\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11974
12052
|
}
|
|
11975
12053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, decorators: [{
|
|
11976
12054
|
type: Component,
|
|
11977
|
-
args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"resolvedRemoveLabel()\"\n (click)=\"onRemove($event)\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
|
|
11978
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
12055
|
+
args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n [attr.tabindex]=\"removeTabbable() ? null : -1\"\n [attr.aria-label]=\"resolvedRemoveLabel()\"\n (click)=\"onRemove($event)\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
|
|
12056
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removeTabbable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabbable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
11979
12057
|
|
|
11980
12058
|
/**
|
|
11981
12059
|
* Multi-select dropdown. Renders selections as removable `<ea-tag>` chips
|
|
@@ -12366,7 +12444,7 @@ class MultiSelectComponent {
|
|
|
12366
12444
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
12367
12445
|
multi: true,
|
|
12368
12446
|
},
|
|
12369
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? 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 [removable]=\"!isDisabled() && !readonly()\"\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]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\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 class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\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 (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span class=\"ea-multi-select__option-label\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\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", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.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--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@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){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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){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:not-allowed}.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{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{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 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;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--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:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);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{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style: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:not-allowed}@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: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__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12447
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? 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 [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]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\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 class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\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 (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span class=\"ea-multi-select__option-label\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\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", 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--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-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@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){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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){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:not-allowed}.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{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{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 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;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--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:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);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{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style: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:not-allowed}@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: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__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "removeTabbable"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12370
12448
|
}
|
|
12371
12449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
12372
12450
|
type: Component,
|
|
@@ -12386,7 +12464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
12386
12464
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
12387
12465
|
multi: true,
|
|
12388
12466
|
},
|
|
12389
|
-
], template: "<div class=\"ea-multi-select-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? 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 [removable]=\"!isDisabled() && !readonly()\"\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]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\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 class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\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 (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span class=\"ea-multi-select__option-label\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\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", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.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--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@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){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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){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:not-allowed}.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{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{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 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;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--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:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);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{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style: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:not-allowed}@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: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__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
|
|
12467
|
+
], 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 [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? 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 [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]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\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 class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\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 (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span class=\"ea-multi-select__option-label\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\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", 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--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-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@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){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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){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:not-allowed}.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{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{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 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;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--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:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);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{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style: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:not-allowed}@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: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__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
|
|
12390
12468
|
}], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
12391
12469
|
|
|
12392
12470
|
class ChevronUpIconComponent extends IconComponentBase {
|
|
@@ -12659,7 +12737,7 @@ class NumberInputComponent {
|
|
|
12659
12737
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
12660
12738
|
multi: true,
|
|
12661
12739
|
},
|
|
12662
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-number-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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\n <div class=\"ea-number-input-wrapper__steppers\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canIncrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"increment()\">\n <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canDecrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"decrement()\">\n <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n </div>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--
|
|
12740
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-number-input-field ea-number-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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\n <div class=\"ea-number-input-wrapper__steppers\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canIncrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"increment()\">\n <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canDecrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"decrement()\">\n <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n </div>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", 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--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;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{--ea-icon-button-size: 1.1em;width:1.5em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-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);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12663
12741
|
}
|
|
12664
12742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
12665
12743
|
type: Component,
|
|
@@ -12675,7 +12753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
12675
12753
|
useExisting: forwardRef(() => NumberInputComponent),
|
|
12676
12754
|
multi: true,
|
|
12677
12755
|
},
|
|
12678
|
-
], template: "<div class=\"ea-number-input-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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\n <div class=\"ea-number-input-wrapper__steppers\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canIncrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"increment()\">\n <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canDecrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"decrement()\">\n <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n </div>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--
|
|
12756
|
+
], template: "<div class=\"ea-number-input-field ea-number-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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\n <div class=\"ea-number-input-wrapper__steppers\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canIncrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"increment()\">\n <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"ea-number-input-wrapper__step\"\n [disabled]=\"!canDecrement()\"\n [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n (mousedown)=\"onStepMousedown($event)\"\n (click)=\"decrement()\">\n <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n </button>\n </div>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", 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--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;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{--ea-icon-button-size: 1.1em;width:1.5em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-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);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"] }]
|
|
12679
12757
|
}], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
12680
12758
|
|
|
12681
12759
|
/** Whether the runtime's `Intl` actually has number data for `locale` rather
|
|
@@ -12823,7 +12901,7 @@ class PaginatorComponent {
|
|
|
12823
12901
|
this.changed.emit({ page: 1, pageSize: newSize });
|
|
12824
12902
|
}
|
|
12825
12903
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;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;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12904
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;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;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12827
12905
|
}
|
|
12828
12906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
12829
12907
|
type: Component,
|
|
@@ -12833,7 +12911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
12833
12911
|
ChevronDownIconComponent,
|
|
12834
12912
|
ChevronLeftIconComponent,
|
|
12835
12913
|
ChevronRightIconComponent,
|
|
12836
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;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;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
|
|
12914
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;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;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
|
|
12837
12915
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
12838
12916
|
|
|
12839
12917
|
/**
|
|
@@ -12881,11 +12959,11 @@ class ProgressBarComponent {
|
|
|
12881
12959
|
'ea-progress-bar--indeterminate': this.indeterminate(),
|
|
12882
12960
|
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
12883
12961
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap
|
|
12962
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem;font-size:var(--font-size-xs)}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem;font-size:var(--font-size-sm)}.ea-progress-bar--md{--ea-progress-bar-size: .375rem;font-size:var(--font-size-md)}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem;font-size:var(--font-size-lg)}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem;font-size:var(--font-size-xl)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:.875em;font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:.875em;font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12885
12963
|
}
|
|
12886
12964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
12887
12965
|
type: Component,
|
|
12888
|
-
args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap
|
|
12966
|
+
args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showsPercentage()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">\n {{ label() }}\n </span>\n }\n @if (showsPercentage() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">\n <bdi>{{ percentageRounded() }}%</bdi>\n </span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-busy]=\"indeterminate() || null\"\n [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n @if (bufferPercentage() !== null && !indeterminate()) {\n <div\n class=\"ea-progress-bar__buffer\"\n [style.width]=\"bufferPercentage() + '%'\">\n </div>\n }\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n </div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem;font-size:var(--font-size-xs)}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem;font-size:var(--font-size-sm)}.ea-progress-bar--md{--ea-progress-bar-size: .375rem;font-size:var(--font-size-md)}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem;font-size:var(--font-size-lg)}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem;font-size:var(--font-size-xl)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:.875em;font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:.875em;font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
|
|
12889
12967
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }] } });
|
|
12890
12968
|
|
|
12891
12969
|
/**
|
|
@@ -12950,7 +13028,7 @@ class RadioGroupComponent {
|
|
|
12950
13028
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
12951
13029
|
multi: true,
|
|
12952
13030
|
},
|
|
12953
|
-
], ngImport: i0, template: "<div class=\"ea-radio-group-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--
|
|
13031
|
+
], ngImport: i0, 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 [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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12954
13032
|
}
|
|
12955
13033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
12956
13034
|
type: Component,
|
|
@@ -12960,7 +13038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
12960
13038
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
12961
13039
|
multi: true,
|
|
12962
13040
|
},
|
|
12963
|
-
], template: "<div class=\"ea-radio-group-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--
|
|
13041
|
+
], 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 [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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
|
|
12964
13042
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
12965
13043
|
|
|
12966
13044
|
/**
|
|
@@ -13237,7 +13315,7 @@ class RangeSliderComponent {
|
|
|
13237
13315
|
useExisting: forwardRef(() => RangeSliderComponent),
|
|
13238
13316
|
multi: true,
|
|
13239
13317
|
},
|
|
13240
|
-
], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} \u2013\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", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap
|
|
13318
|
+
], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} \u2013\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", 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--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:var(--space-2)}.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:var(--space-1);width:100%}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__thumb:focus-visible{outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.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:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.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{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"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13241
13319
|
}
|
|
13242
13320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RangeSliderComponent, decorators: [{
|
|
13243
13321
|
type: Component,
|
|
@@ -13247,7 +13325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
13247
13325
|
useExisting: forwardRef(() => RangeSliderComponent),
|
|
13248
13326
|
multi: true,
|
|
13249
13327
|
},
|
|
13250
|
-
], 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} \u2013\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", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap
|
|
13328
|
+
], 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n @if (showValue()) {\n <span class=\"ea-range-slider-field__value\">\n <bdi>\n {{ formatDisplay(clampedValue()[0]) }} \u2013\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", 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--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:var(--space-2)}.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:var(--space-1);width:100%}.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;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__thumb:focus-visible{outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.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:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.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{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"] }]
|
|
13251
13329
|
}], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-low", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-high", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13252
13330
|
|
|
13253
13331
|
class LeftHalfStarIconComponent extends IconComponentBase {
|
|
@@ -13614,7 +13692,7 @@ class RatingComponent {
|
|
|
13614
13692
|
useExisting: forwardRef(() => RatingComponent),
|
|
13615
13693
|
multi: true,
|
|
13616
13694
|
},
|
|
13617
|
-
], viewQueries: [{ propertyName: "starsEl", first: true, predicate: ["starsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"resolvedAriaLabel()\"\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", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:
|
|
13695
|
+
], viewQueries: [{ propertyName: "starsEl", first: true, predicate: ["starsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"resolvedAriaLabel()\"\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", 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;box-shadow:var(--shadow-focus-ring)}@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--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{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"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13618
13696
|
}
|
|
13619
13697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RatingComponent, decorators: [{
|
|
13620
13698
|
type: Component,
|
|
@@ -13624,7 +13702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
13624
13702
|
useExisting: forwardRef(() => RatingComponent),
|
|
13625
13703
|
multi: true,
|
|
13626
13704
|
},
|
|
13627
|
-
], template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"resolvedAriaLabel()\"\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", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:
|
|
13705
|
+
], template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"resolvedAriaLabel()\"\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", 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;box-shadow:var(--shadow-focus-ring)}@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--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{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"] }]
|
|
13628
13706
|
}], ctorParameters: () => [], propDecorators: { starsEl: [{ type: i0.ViewChild, args: ['starsEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowHalf: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHalf", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], halfIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "halfIconClass", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hoverChanged: [{ type: i0.Output, args: ["hoverChanged"] }] } });
|
|
13629
13707
|
|
|
13630
13708
|
/**
|
|
@@ -13769,7 +13847,7 @@ class SegmentedComponent {
|
|
|
13769
13847
|
useExisting: forwardRef(() => SegmentedComponent),
|
|
13770
13848
|
multi: true,
|
|
13771
13849
|
},
|
|
13772
|
-
], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-segmented-field\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:
|
|
13850
|
+
], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);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:not-allowed}.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{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option:focus-visible{outline:none}.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:not-allowed}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13773
13851
|
}
|
|
13774
13852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedComponent, decorators: [{
|
|
13775
13853
|
type: Component,
|
|
@@ -13781,7 +13859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
13781
13859
|
useExisting: forwardRef(() => SegmentedComponent),
|
|
13782
13860
|
multi: true,
|
|
13783
13861
|
},
|
|
13784
|
-
], template: "<div\n class=\"ea-segmented-field\"\n [class.ea-segmented-field--full-width]=\"fullWidth()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:
|
|
13862
|
+
], 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 [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-segmented\"\n role=\"radiogroup\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);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:not-allowed}.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{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option:focus-visible{outline:none}.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:not-allowed}\n"] }]
|
|
13785
13863
|
}], propDecorators: { buttonEls: [{ type: i0.ViewChildren, args: ['optionEl', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13786
13864
|
|
|
13787
13865
|
// Default value formatter, identity-checked so a custom `formatValue` bypasses
|
|
@@ -13982,7 +14060,7 @@ class SliderComponent {
|
|
|
13982
14060
|
useExisting: forwardRef(() => SliderComponent),
|
|
13983
14061
|
multi: true,
|
|
13984
14062
|
},
|
|
13985
|
-
], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [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 <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [".ea-slider-field{display:flex;flex-direction:column;gap
|
|
14063
|
+
], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [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 <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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:var(--space-2)}.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:var(--space-1);width:100%}.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__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{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.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:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.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{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"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13986
14064
|
}
|
|
13987
14065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SliderComponent, decorators: [{
|
|
13988
14066
|
type: Component,
|
|
@@ -13992,7 +14070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
13992
14070
|
useExisting: forwardRef(() => SliderComponent),
|
|
13993
14071
|
multi: true,
|
|
13994
14072
|
},
|
|
13995
|
-
], 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 [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 <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", styles: [".ea-slider-field{display:flex;flex-direction:column;gap
|
|
14073
|
+
], 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 [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 <div\n class=\"ea-slider__fill\"\n [style.width.%]=\"percent()\">\n </div>\n <div\n class=\"ea-slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"!label() ? (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", 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--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:var(--space-2)}.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:var(--space-1);width:100%}.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__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{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.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:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.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{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"] }]
|
|
13996
14074
|
}], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13997
14075
|
|
|
13998
14076
|
/**
|
|
@@ -14286,7 +14364,7 @@ class SwitchComponent {
|
|
|
14286
14364
|
useExisting: forwardRef(() => SwitchComponent),
|
|
14287
14365
|
multi: true,
|
|
14288
14366
|
},
|
|
14289
|
-
], ngImport: i0, template: "<div class=\"ea-switch-field\">\n <label\n class=\"ea-switch\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n class=\"ea-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n <span class=\"ea-switch__track\">\n <span class=\"ea-switch__thumb\"></span>\n </span>\n @if (label()) {\n <span\n class=\"ea-switch__label\"\n [class.ea-switch__label--required]=\"required()\">\n {{ label() }}\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap
|
|
14367
|
+
], ngImport: i0, template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n <label\n class=\"ea-switch\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n class=\"ea-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n <span class=\"ea-switch__track\">\n <span class=\"ea-switch__thumb\"></span>\n </span>\n @if (label()) {\n <span\n class=\"ea-switch__label\"\n [class.ea-switch__label--required]=\"required()\">\n {{ label() }}\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14290
14368
|
}
|
|
14291
14369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
14292
14370
|
type: Component,
|
|
@@ -14296,7 +14374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
14296
14374
|
useExisting: forwardRef(() => SwitchComponent),
|
|
14297
14375
|
multi: true,
|
|
14298
14376
|
},
|
|
14299
|
-
], template: "<div class=\"ea-switch-field\">\n <label\n class=\"ea-switch\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n class=\"ea-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n <span class=\"ea-switch__track\">\n <span class=\"ea-switch__thumb\"></span>\n </span>\n @if (label()) {\n <span\n class=\"ea-switch__label\"\n [class.ea-switch__label--required]=\"required()\">\n {{ label() }}\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap
|
|
14377
|
+
], template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n <label\n class=\"ea-switch\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n class=\"ea-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"!label() ? (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 (change)=\"handleChange()\" />\n <span class=\"ea-switch__track\">\n <span class=\"ea-switch__thumb\"></span>\n </span>\n @if (label()) {\n <span\n class=\"ea-switch__label\"\n [class.ea-switch__label--required]=\"required()\">\n {{ label() }}\n </span>\n }\n </label>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
|
|
14300
14378
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
14301
14379
|
|
|
14302
14380
|
/**
|
|
@@ -14427,6 +14505,8 @@ const DEFAULT_ROWS = 3;
|
|
|
14427
14505
|
class TextareaComponent {
|
|
14428
14506
|
textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
|
|
14429
14507
|
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
14508
|
+
/** Accessible name for the control when no visible `label` is set. */
|
|
14509
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
14430
14510
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
14431
14511
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14432
14512
|
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
@@ -14509,13 +14589,13 @@ class TextareaComponent {
|
|
|
14509
14589
|
this.textareaEl()?.nativeElement.focus();
|
|
14510
14590
|
}
|
|
14511
14591
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
14592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
|
|
14513
14593
|
{
|
|
14514
14594
|
provide: NG_VALUE_ACCESSOR,
|
|
14515
14595
|
useExisting: forwardRef(() => TextareaComponent),
|
|
14516
14596
|
multi: true,
|
|
14517
14597
|
},
|
|
14518
|
-
], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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-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)\"></textarea>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap
|
|
14598
|
+
], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", 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--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-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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.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{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14519
14599
|
}
|
|
14520
14600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
14521
14601
|
type: Component,
|
|
@@ -14525,8 +14605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
14525
14605
|
useExisting: forwardRef(() => TextareaComponent),
|
|
14526
14606
|
multi: true,
|
|
14527
14607
|
},
|
|
14528
|
-
], template: "<div class=\"ea-textarea-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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-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)\"></textarea>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap
|
|
14529
|
-
}], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
14608
|
+
], template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", 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--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-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{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.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{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
|
|
14609
|
+
}], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
14530
14610
|
|
|
14531
14611
|
class ClockIconComponent extends IconComponentBase {
|
|
14532
14612
|
static slug = 'clock';
|
|
@@ -15065,7 +15145,7 @@ class TimePickerComponent {
|
|
|
15065
15145
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
15066
15146
|
multi: true,
|
|
15067
15147
|
},
|
|
15068
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 <button\n #triggerEl\n type=\"button\"\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? 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)=\"handleTriggerKeydown($event)\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-time-picker__trigger-value\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\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", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.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:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);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--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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em;height:1.75em}.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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;box-shadow:var(--shadow-focus-ring)}@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"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15148
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, 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 [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 <button\n #triggerEl\n type=\"button\"\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? 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)=\"handleTriggerKeydown($event)\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-time-picker__trigger-value\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\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", 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--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:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);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--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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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;box-shadow:var(--shadow-focus-ring)}@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"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15069
15149
|
}
|
|
15070
15150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
15071
15151
|
type: Component,
|
|
@@ -15084,7 +15164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
15084
15164
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
15085
15165
|
multi: true,
|
|
15086
15166
|
},
|
|
15087
|
-
], template: "<div class=\"ea-time-picker-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\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 <button\n #triggerEl\n type=\"button\"\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? 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)=\"handleTriggerKeydown($event)\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-time-picker__trigger-value\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\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", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.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:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);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--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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em;height:1.75em}.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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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;box-shadow:var(--shadow-focus-ring)}@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"] }]
|
|
15167
|
+
], 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 [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 <button\n #triggerEl\n type=\"button\"\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-controls]=\"isOpen() ? 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)=\"handleTriggerKeydown($event)\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-time-picker__trigger-value\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n </button>\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", 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--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:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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{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:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);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--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{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;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;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@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;box-shadow:var(--shadow-focus-ring)}@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"] }]
|
|
15088
15168
|
}], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }], secondsEl: [{ type: i0.ViewChild, args: ['secondsEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], includeSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
15089
15169
|
/** Delay before a held chevron button starts repeating, in ms. */
|
|
15090
15170
|
const HOLD_INITIAL_DELAY = 400;
|
|
@@ -15676,6 +15756,9 @@ class TransferListComponent {
|
|
|
15676
15756
|
}, ...(ngDevMode ? [{ debugName: "canMoveAllLeft" }] : /* istanbul ignore next */ []));
|
|
15677
15757
|
resolvedSourceLabel = computed(() => this.sourceLabel() ?? this.messages().transferList.sourceLabel, ...(ngDevMode ? [{ debugName: "resolvedSourceLabel" }] : /* istanbul ignore next */ []));
|
|
15678
15758
|
resolvedTargetLabel = computed(() => this.targetLabel() ?? this.messages().transferList.targetLabel, ...(ngDevMode ? [{ debugName: "resolvedTargetLabel" }] : /* istanbul ignore next */ []));
|
|
15759
|
+
// Moves rearrange both panes at once, which a screen reader has no way to
|
|
15760
|
+
// report on its own, so each transfer is summarized in a live region.
|
|
15761
|
+
announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
|
|
15679
15762
|
hostClasses = computed(() => [
|
|
15680
15763
|
'ea-transfer-list',
|
|
15681
15764
|
`ea-transfer-list--${this.size()}`,
|
|
@@ -15812,6 +15895,7 @@ class TransferListComponent {
|
|
|
15812
15895
|
const toMove = Array.from(highlighted).filter(id => sourceIds.has(id));
|
|
15813
15896
|
this.selectedIds.set([...this.selectedIds(), ...toMove]);
|
|
15814
15897
|
this.leftHighlighted.set(new Set());
|
|
15898
|
+
this.announceMove(toMove.length, this.resolvedTargetLabel());
|
|
15815
15899
|
}
|
|
15816
15900
|
moveAllRight() {
|
|
15817
15901
|
if (!this.canMoveAllRight()) {
|
|
@@ -15822,6 +15906,7 @@ class TransferListComponent {
|
|
|
15822
15906
|
.map(i => i.id);
|
|
15823
15907
|
this.selectedIds.set([...this.selectedIds(), ...moveable]);
|
|
15824
15908
|
this.leftHighlighted.set(new Set());
|
|
15909
|
+
this.announceMove(moveable.length, this.resolvedTargetLabel());
|
|
15825
15910
|
}
|
|
15826
15911
|
moveSelectedLeft() {
|
|
15827
15912
|
if (!this.canMoveLeft()) {
|
|
@@ -15834,6 +15919,7 @@ class TransferListComponent {
|
|
|
15834
15919
|
const toRemove = new Set(Array.from(highlighted).filter(id => targetIds.has(id)));
|
|
15835
15920
|
this.selectedIds.set(this.selectedIds().filter(id => !toRemove.has(id)));
|
|
15836
15921
|
this.rightHighlighted.set(new Set());
|
|
15922
|
+
this.announceMove(toRemove.size, this.resolvedSourceLabel());
|
|
15837
15923
|
}
|
|
15838
15924
|
moveAllLeft() {
|
|
15839
15925
|
if (!this.canMoveAllLeft()) {
|
|
@@ -15842,11 +15928,18 @@ class TransferListComponent {
|
|
|
15842
15928
|
const stickyIds = new Set(this.targetItems()
|
|
15843
15929
|
.filter(i => i.disabled)
|
|
15844
15930
|
.map(i => i.id));
|
|
15931
|
+
const movedCount = this.targetItems().filter(i => !i.disabled).length;
|
|
15845
15932
|
this.selectedIds.set(this.selectedIds().filter(id => stickyIds.has(id)));
|
|
15846
15933
|
this.rightHighlighted.set(new Set());
|
|
15934
|
+
this.announceMove(movedCount, this.resolvedSourceLabel());
|
|
15935
|
+
}
|
|
15936
|
+
announceMove(count, listLabel) {
|
|
15937
|
+
if (count > 0) {
|
|
15938
|
+
this.announcement.set(this.messages().transferList.moved(`${count}`, listLabel));
|
|
15939
|
+
}
|
|
15847
15940
|
}
|
|
15848
15941
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15942
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{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}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15850
15943
|
}
|
|
15851
15944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TransferListComponent, decorators: [{
|
|
15852
15945
|
type: Component,
|
|
@@ -15855,7 +15948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
15855
15948
|
ChevronRightIconComponent,
|
|
15856
15949
|
ChevronsLeftIconComponent,
|
|
15857
15950
|
ChevronsRightIconComponent,
|
|
15858
|
-
], template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"] }]
|
|
15951
|
+
], template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{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}\n"] }]
|
|
15859
15952
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
15860
15953
|
|
|
15861
15954
|
/**
|