@eagami/ui 5.50.0 → 5.51.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 +2106 -42
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/tokens/_colors.scss +21 -0
- package/src/styles/type-scale.spec.ts +72 -0
- package/types/eagami-ui.d.ts +694 -1
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -407,6 +407,18 @@ const ar = {
|
|
|
407
407
|
tooLarge: (maxMb) => `الملف يتجاوز حد ${maxMb} MB`
|
|
408
408
|
},
|
|
409
409
|
breadcrumbs: { label: "مسار التنقل" },
|
|
410
|
+
chart: {
|
|
411
|
+
roleDescription: "مخطط",
|
|
412
|
+
lineChart: "مخطط خطي",
|
|
413
|
+
barChart: "مخطط شريطي",
|
|
414
|
+
pieChart: "مخطط دائري",
|
|
415
|
+
category: "الفئة",
|
|
416
|
+
value: "القيمة",
|
|
417
|
+
share: "النسبة",
|
|
418
|
+
noData: "لا توجد بيانات",
|
|
419
|
+
point: (series, label, value) => `${series}، ${label}: ${value}`,
|
|
420
|
+
slice: (label, value, percent) => `${label}: ${value}، ${percent}`
|
|
421
|
+
},
|
|
410
422
|
codeInput: {
|
|
411
423
|
groupLabel: (length) => `رمز التحقق، ${length} أرقام`,
|
|
412
424
|
digitLabel: (index, length) => `الرقم ${index} من ${length}`
|
|
@@ -604,6 +616,18 @@ const de = {
|
|
|
604
616
|
tooLarge: (maxMb) => `Datei überschreitet das Limit von ${maxMb} MB`
|
|
605
617
|
},
|
|
606
618
|
breadcrumbs: { label: "Brotkrümelnavigation" },
|
|
619
|
+
chart: {
|
|
620
|
+
roleDescription: "Diagramm",
|
|
621
|
+
lineChart: "Liniendiagramm",
|
|
622
|
+
barChart: "Balkendiagramm",
|
|
623
|
+
pieChart: "Kreisdiagramm",
|
|
624
|
+
category: "Kategorie",
|
|
625
|
+
value: "Wert",
|
|
626
|
+
share: "Anteil",
|
|
627
|
+
noData: "Keine Daten",
|
|
628
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
629
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
630
|
+
},
|
|
607
631
|
codeInput: {
|
|
608
632
|
groupLabel: (length) => `Bestätigungscode, ${length} Ziffern`,
|
|
609
633
|
digitLabel: (index, length) => `Ziffer ${index} von ${length}`
|
|
@@ -801,6 +825,18 @@ const el = {
|
|
|
801
825
|
tooLarge: (maxMb) => `Το αρχείο υπερβαίνει το όριο των ${maxMb} MB`
|
|
802
826
|
},
|
|
803
827
|
breadcrumbs: { label: "Διαδρομή πλοήγησης" },
|
|
828
|
+
chart: {
|
|
829
|
+
roleDescription: "γράφημα",
|
|
830
|
+
lineChart: "Γράφημα γραμμών",
|
|
831
|
+
barChart: "Ραβδόγραμμα",
|
|
832
|
+
pieChart: "Κυκλικό διάγραμμα",
|
|
833
|
+
category: "Κατηγορία",
|
|
834
|
+
value: "Τιμή",
|
|
835
|
+
share: "Μερίδιο",
|
|
836
|
+
noData: "Δεν υπάρχουν δεδομένα",
|
|
837
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
838
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
839
|
+
},
|
|
804
840
|
codeInput: {
|
|
805
841
|
groupLabel: (length) => `Κωδικός επαλήθευσης, ${length} ψηφία`,
|
|
806
842
|
digitLabel: (index, length) => `Ψηφίο ${index} από ${length}`
|
|
@@ -998,6 +1034,18 @@ const en = {
|
|
|
998
1034
|
tooLarge: (maxMb) => `File exceeds ${maxMb} MB limit`
|
|
999
1035
|
},
|
|
1000
1036
|
breadcrumbs: { label: "Breadcrumb" },
|
|
1037
|
+
chart: {
|
|
1038
|
+
roleDescription: "chart",
|
|
1039
|
+
lineChart: "Line chart",
|
|
1040
|
+
barChart: "Bar chart",
|
|
1041
|
+
pieChart: "Pie chart",
|
|
1042
|
+
category: "Category",
|
|
1043
|
+
value: "Value",
|
|
1044
|
+
share: "Share",
|
|
1045
|
+
noData: "No data",
|
|
1046
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
1047
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
1048
|
+
},
|
|
1001
1049
|
codeInput: {
|
|
1002
1050
|
groupLabel: (length) => `Verification code, ${length} digits`,
|
|
1003
1051
|
digitLabel: (index, length) => `Digit ${index} of ${length}`
|
|
@@ -1195,6 +1243,18 @@ const esES = {
|
|
|
1195
1243
|
tooLarge: (maxMb) => `El archivo supera el límite de ${maxMb} MB`
|
|
1196
1244
|
},
|
|
1197
1245
|
breadcrumbs: { label: "Ruta de navegación" },
|
|
1246
|
+
chart: {
|
|
1247
|
+
roleDescription: "gráfico",
|
|
1248
|
+
lineChart: "Gráfico de líneas",
|
|
1249
|
+
barChart: "Gráfico de barras",
|
|
1250
|
+
pieChart: "Gráfico circular",
|
|
1251
|
+
category: "Categoría",
|
|
1252
|
+
value: "Valor",
|
|
1253
|
+
share: "Proporción",
|
|
1254
|
+
noData: "Sin datos",
|
|
1255
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
1256
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
1257
|
+
},
|
|
1198
1258
|
codeInput: {
|
|
1199
1259
|
groupLabel: (length) => `Código de verificación, ${length} dígitos`,
|
|
1200
1260
|
digitLabel: (index, length) => `Dígito ${index} de ${length}`
|
|
@@ -1392,6 +1452,18 @@ const frFR = {
|
|
|
1392
1452
|
tooLarge: (maxMb) => `Le fichier dépasse la limite de ${maxMb} MB`
|
|
1393
1453
|
},
|
|
1394
1454
|
breadcrumbs: { label: "Fil d'Ariane" },
|
|
1455
|
+
chart: {
|
|
1456
|
+
roleDescription: "graphique",
|
|
1457
|
+
lineChart: "Graphique linéaire",
|
|
1458
|
+
barChart: "Graphique à barres",
|
|
1459
|
+
pieChart: "Graphique circulaire",
|
|
1460
|
+
category: "Catégorie",
|
|
1461
|
+
value: "Valeur",
|
|
1462
|
+
share: "Part",
|
|
1463
|
+
noData: "Aucune donnée",
|
|
1464
|
+
point: (series, label, value) => `${series}, ${label} : ${value}`,
|
|
1465
|
+
slice: (label, value, percent) => `${label} : ${value}, ${percent}`
|
|
1466
|
+
},
|
|
1395
1467
|
codeInput: {
|
|
1396
1468
|
groupLabel: (length) => `Code de vérification, ${length} chiffres`,
|
|
1397
1469
|
digitLabel: (index, length) => `Chiffre ${index} sur ${length}`
|
|
@@ -1589,6 +1661,18 @@ const he = {
|
|
|
1589
1661
|
tooLarge: (maxMb) => `הקובץ חורג ממגבלת ${maxMb} MB`
|
|
1590
1662
|
},
|
|
1591
1663
|
breadcrumbs: { label: "נתיב ניווט" },
|
|
1664
|
+
chart: {
|
|
1665
|
+
roleDescription: "תרשים",
|
|
1666
|
+
lineChart: "תרשים קווי",
|
|
1667
|
+
barChart: "תרשים עמודות",
|
|
1668
|
+
pieChart: "תרשים עוגה",
|
|
1669
|
+
category: "קטגוריה",
|
|
1670
|
+
value: "ערך",
|
|
1671
|
+
share: "נתח",
|
|
1672
|
+
noData: "אין נתונים",
|
|
1673
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
1674
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
1675
|
+
},
|
|
1592
1676
|
codeInput: {
|
|
1593
1677
|
groupLabel: (length) => `קוד אימות, ${length} ספרות`,
|
|
1594
1678
|
digitLabel: (index, length) => `ספרה ${index} מתוך ${length}`
|
|
@@ -1786,6 +1870,18 @@ const hi = {
|
|
|
1786
1870
|
tooLarge: (maxMb) => `फ़ाइल ${maxMb} MB की सीमा से अधिक है`
|
|
1787
1871
|
},
|
|
1788
1872
|
breadcrumbs: { label: "ब्रेडक्रंब" },
|
|
1873
|
+
chart: {
|
|
1874
|
+
roleDescription: "चार्ट",
|
|
1875
|
+
lineChart: "लाइन चार्ट",
|
|
1876
|
+
barChart: "बार चार्ट",
|
|
1877
|
+
pieChart: "पाई चार्ट",
|
|
1878
|
+
category: "श्रेणी",
|
|
1879
|
+
value: "मान",
|
|
1880
|
+
share: "हिस्सा",
|
|
1881
|
+
noData: "कोई डेटा नहीं",
|
|
1882
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
1883
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
1884
|
+
},
|
|
1789
1885
|
codeInput: {
|
|
1790
1886
|
groupLabel: (length) => `सत्यापन कोड, ${length} अंक`,
|
|
1791
1887
|
digitLabel: (index, length) => `${length} में से अंक ${index}`
|
|
@@ -1983,6 +2079,18 @@ const is = {
|
|
|
1983
2079
|
tooLarge: (maxMb) => `Skráin fer yfir ${maxMb} MB mörkin`
|
|
1984
2080
|
},
|
|
1985
2081
|
breadcrumbs: { label: "Brauðmolaslóð" },
|
|
2082
|
+
chart: {
|
|
2083
|
+
roleDescription: "graf",
|
|
2084
|
+
lineChart: "Línurit",
|
|
2085
|
+
barChart: "Súlurit",
|
|
2086
|
+
pieChart: "Kökurit",
|
|
2087
|
+
category: "Flokkur",
|
|
2088
|
+
value: "Gildi",
|
|
2089
|
+
share: "Hlutfall",
|
|
2090
|
+
noData: "Engin gögn",
|
|
2091
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
2092
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
2093
|
+
},
|
|
1986
2094
|
codeInput: {
|
|
1987
2095
|
groupLabel: (length) => `Staðfestingarkóði, ${length} tölustafir`,
|
|
1988
2096
|
digitLabel: (index, length) => `Tölustafur ${index} af ${length}`
|
|
@@ -2180,6 +2288,18 @@ const nl = {
|
|
|
2180
2288
|
tooLarge: (maxMb) => `Bestand overschrijdt de limiet van ${maxMb} MB`
|
|
2181
2289
|
},
|
|
2182
2290
|
breadcrumbs: { label: "Broodkruimelnavigatie" },
|
|
2291
|
+
chart: {
|
|
2292
|
+
roleDescription: "grafiek",
|
|
2293
|
+
lineChart: "Lijndiagram",
|
|
2294
|
+
barChart: "Staafdiagram",
|
|
2295
|
+
pieChart: "Cirkeldiagram",
|
|
2296
|
+
category: "Categorie",
|
|
2297
|
+
value: "Waarde",
|
|
2298
|
+
share: "Aandeel",
|
|
2299
|
+
noData: "Geen gegevens",
|
|
2300
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
2301
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
2302
|
+
},
|
|
2183
2303
|
codeInput: {
|
|
2184
2304
|
groupLabel: (length) => `Verificatiecode, ${length} cijfers`,
|
|
2185
2305
|
digitLabel: (index, length) => `Cijfer ${index} van ${length}`
|
|
@@ -2377,6 +2497,18 @@ const pl = {
|
|
|
2377
2497
|
tooLarge: (maxMb) => `Plik przekracza limit ${maxMb} MB`
|
|
2378
2498
|
},
|
|
2379
2499
|
breadcrumbs: { label: "Ścieżka nawigacji" },
|
|
2500
|
+
chart: {
|
|
2501
|
+
roleDescription: "wykres",
|
|
2502
|
+
lineChart: "Wykres liniowy",
|
|
2503
|
+
barChart: "Wykres słupkowy",
|
|
2504
|
+
pieChart: "Wykres kołowy",
|
|
2505
|
+
category: "Kategoria",
|
|
2506
|
+
value: "Wartość",
|
|
2507
|
+
share: "Udział",
|
|
2508
|
+
noData: "Brak danych",
|
|
2509
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
2510
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
2511
|
+
},
|
|
2380
2512
|
codeInput: {
|
|
2381
2513
|
groupLabel: (length) => `Kod weryfikacyjny, ${length} cyfr`,
|
|
2382
2514
|
digitLabel: (index, length) => `Cyfra ${index} z ${length}`
|
|
@@ -2574,6 +2706,18 @@ const ptBR = {
|
|
|
2574
2706
|
tooLarge: (maxMb) => `O arquivo excede o limite de ${maxMb} MB`
|
|
2575
2707
|
},
|
|
2576
2708
|
breadcrumbs: { label: "Trilha de navegação" },
|
|
2709
|
+
chart: {
|
|
2710
|
+
roleDescription: "gráfico",
|
|
2711
|
+
lineChart: "Gráfico de linhas",
|
|
2712
|
+
barChart: "Gráfico de barras",
|
|
2713
|
+
pieChart: "Gráfico de pizza",
|
|
2714
|
+
category: "Categoria",
|
|
2715
|
+
value: "Valor",
|
|
2716
|
+
share: "Participação",
|
|
2717
|
+
noData: "Sem dados",
|
|
2718
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
2719
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
2720
|
+
},
|
|
2577
2721
|
codeInput: {
|
|
2578
2722
|
groupLabel: (length) => `Código de verificação, ${length} dígitos`,
|
|
2579
2723
|
digitLabel: (index, length) => `Dígito ${index} de ${length}`
|
|
@@ -2771,6 +2915,18 @@ const ru = {
|
|
|
2771
2915
|
tooLarge: (maxMb) => `Файл превышает лимит ${maxMb} MB`
|
|
2772
2916
|
},
|
|
2773
2917
|
breadcrumbs: { label: "Навигационная цепочка" },
|
|
2918
|
+
chart: {
|
|
2919
|
+
roleDescription: "диаграмма",
|
|
2920
|
+
lineChart: "Линейный график",
|
|
2921
|
+
barChart: "Столбчатая диаграмма",
|
|
2922
|
+
pieChart: "Круговая диаграмма",
|
|
2923
|
+
category: "Категория",
|
|
2924
|
+
value: "Значение",
|
|
2925
|
+
share: "Доля",
|
|
2926
|
+
noData: "Нет данных",
|
|
2927
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
2928
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
2929
|
+
},
|
|
2774
2930
|
codeInput: {
|
|
2775
2931
|
groupLabel: (length) => `Код подтверждения, ${length} цифр`,
|
|
2776
2932
|
digitLabel: (index, length) => `Цифра ${index} из ${length}`
|
|
@@ -2968,6 +3124,18 @@ const uk = {
|
|
|
2968
3124
|
tooLarge: (maxMb) => `Файл перевищує ліміт ${maxMb} MB`
|
|
2969
3125
|
},
|
|
2970
3126
|
breadcrumbs: { label: "Навігаційний ланцюжок" },
|
|
3127
|
+
chart: {
|
|
3128
|
+
roleDescription: "діаграма",
|
|
3129
|
+
lineChart: "Лінійний графік",
|
|
3130
|
+
barChart: "Стовпчикова діаграма",
|
|
3131
|
+
pieChart: "Кругова діаграма",
|
|
3132
|
+
category: "Категорія",
|
|
3133
|
+
value: "Значення",
|
|
3134
|
+
share: "Частка",
|
|
3135
|
+
noData: "Немає даних",
|
|
3136
|
+
point: (series, label, value) => `${series}, ${label}: ${value}`,
|
|
3137
|
+
slice: (label, value, percent) => `${label}: ${value}, ${percent}`
|
|
3138
|
+
},
|
|
2971
3139
|
codeInput: {
|
|
2972
3140
|
groupLabel: (length) => `Код підтвердження, ${length} цифр`,
|
|
2973
3141
|
digitLabel: (index, length) => `Цифра ${index} з ${length}`
|
|
@@ -3165,6 +3333,18 @@ const zhCN = {
|
|
|
3165
3333
|
tooLarge: (maxMb) => `文件超过 ${maxMb} MB 限制`
|
|
3166
3334
|
},
|
|
3167
3335
|
breadcrumbs: { label: "面包屑导航" },
|
|
3336
|
+
chart: {
|
|
3337
|
+
roleDescription: "图表",
|
|
3338
|
+
lineChart: "折线图",
|
|
3339
|
+
barChart: "柱状图",
|
|
3340
|
+
pieChart: "饼图",
|
|
3341
|
+
category: "类别",
|
|
3342
|
+
value: "数值",
|
|
3343
|
+
share: "占比",
|
|
3344
|
+
noData: "无数据",
|
|
3345
|
+
point: (series, label, value) => `${series},${label}:${value}`,
|
|
3346
|
+
slice: (label, value, percent) => `${label}:${value},${percent}`
|
|
3347
|
+
},
|
|
3168
3348
|
codeInput: {
|
|
3169
3349
|
groupLabel: (length) => `验证码,共 ${length} 位`,
|
|
3170
3350
|
digitLabel: (index, length) => `第 ${index} 位,共 ${length} 位`
|
|
@@ -6622,6 +6802,7 @@ var TooltipDirective = class TooltipDirective {
|
|
|
6622
6802
|
whenClipped = input(false, ...ngDevMode ? [{ debugName: "whenClipped" }] : /* istanbul ignore next */ []);
|
|
6623
6803
|
maxWidth = input(200, ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
|
|
6624
6804
|
dismissDelay = input(150, ...ngDevMode ? [{ debugName: "dismissDelay" }] : /* istanbul ignore next */ []);
|
|
6805
|
+
tooltipOpen = input(null, ...ngDevMode ? [{ debugName: "tooltipOpen" }] : /* istanbul ignore next */ []);
|
|
6625
6806
|
tooltipEl = null;
|
|
6626
6807
|
placedPosition = "top";
|
|
6627
6808
|
templateView = null;
|
|
@@ -6631,20 +6812,23 @@ var TooltipDirective = class TooltipDirective {
|
|
|
6631
6812
|
tooltipId = `ea-tooltip-${Math.random().toString(36).slice(2, 9)}`;
|
|
6632
6813
|
hoverMql = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(hover: hover)") : null;
|
|
6633
6814
|
showHandler = () => {
|
|
6815
|
+
if (this.controlled()) return;
|
|
6634
6816
|
this.pointerInside = true;
|
|
6635
6817
|
this.show();
|
|
6636
6818
|
};
|
|
6637
6819
|
pointerLeaveHandler = () => {
|
|
6820
|
+
if (this.controlled()) return;
|
|
6638
6821
|
this.pointerInside = false;
|
|
6639
6822
|
this.requestHide();
|
|
6640
6823
|
};
|
|
6641
6824
|
hideHandler = () => this.requestHide();
|
|
6642
6825
|
focusoutHandler = () => {
|
|
6643
|
-
if (!this.pointerInside) this.requestHide();
|
|
6826
|
+
if (!this.pointerInside && !this.controlled()) this.requestHide();
|
|
6644
6827
|
};
|
|
6645
6828
|
bubbleEnterHandler = () => this.cancelPendingHide();
|
|
6646
6829
|
supportsFocusVisible = typeof CSS !== "undefined" && CSS.supports?.("selector(:focus-visible)") === true;
|
|
6647
6830
|
focusHandler = (event) => {
|
|
6831
|
+
if (this.controlled()) return;
|
|
6648
6832
|
const target = event.target;
|
|
6649
6833
|
if (!this.supportsFocusVisible || target.matches(":focus-visible")) this.show();
|
|
6650
6834
|
};
|
|
@@ -6675,6 +6859,15 @@ var TooltipDirective = class TooltipDirective {
|
|
|
6675
6859
|
native.addEventListener("focusout", this.focusoutHandler);
|
|
6676
6860
|
this.syncPointerListeners(this.hoverMql?.matches ?? true);
|
|
6677
6861
|
this.hoverMql?.addEventListener("change", this.hoverChangeHandler);
|
|
6862
|
+
let wasControlled = false;
|
|
6863
|
+
afterRenderEffect(() => {
|
|
6864
|
+
const open = this.tooltipOpen();
|
|
6865
|
+
if (open !== null || wasControlled) untracked(() => open ? this.show() : this.hide());
|
|
6866
|
+
wasControlled = open !== null;
|
|
6867
|
+
});
|
|
6868
|
+
}
|
|
6869
|
+
controlled() {
|
|
6870
|
+
return this.tooltipOpen() !== null;
|
|
6678
6871
|
}
|
|
6679
6872
|
ngOnDestroy() {
|
|
6680
6873
|
const native = this.el.nativeElement;
|
|
@@ -6939,6 +7132,13 @@ var TooltipDirective = class TooltipDirective {
|
|
|
6939
7132
|
isSignal: true,
|
|
6940
7133
|
isRequired: false,
|
|
6941
7134
|
transformFunction: null
|
|
7135
|
+
},
|
|
7136
|
+
tooltipOpen: {
|
|
7137
|
+
classPropertyName: "tooltipOpen",
|
|
7138
|
+
publicName: "tooltipOpen",
|
|
7139
|
+
isSignal: true,
|
|
7140
|
+
isRequired: false,
|
|
7141
|
+
transformFunction: null
|
|
6942
7142
|
}
|
|
6943
7143
|
},
|
|
6944
7144
|
ngImport: i0
|
|
@@ -7002,6 +7202,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7002
7202
|
alias: "dismissDelay",
|
|
7003
7203
|
required: false
|
|
7004
7204
|
}]
|
|
7205
|
+
}],
|
|
7206
|
+
tooltipOpen: [{
|
|
7207
|
+
type: i0.Input,
|
|
7208
|
+
args: [{
|
|
7209
|
+
isSignal: true,
|
|
7210
|
+
alias: "tooltipOpen",
|
|
7211
|
+
required: false
|
|
7212
|
+
}]
|
|
7005
7213
|
}]
|
|
7006
7214
|
}
|
|
7007
7215
|
});
|
|
@@ -7697,7 +7905,8 @@ var AvatarEditorComponent = class AvatarEditorComponent {
|
|
|
7697
7905
|
"flip",
|
|
7698
7906
|
"whenClipped",
|
|
7699
7907
|
"maxWidth",
|
|
7700
|
-
"dismissDelay"
|
|
7908
|
+
"dismissDelay",
|
|
7909
|
+
"tooltipOpen"
|
|
7701
7910
|
]
|
|
7702
7911
|
},
|
|
7703
7912
|
{
|
|
@@ -8145,7 +8354,7 @@ var BadgeComponent = class BadgeComponent {
|
|
|
8145
8354
|
},
|
|
8146
8355
|
ngImport: i0,
|
|
8147
8356
|
template: "<span\n class=\"ea-badge\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n</span>\n",
|
|
8148
|
-
styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full);forced-color-adjust:none}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-
|
|
8357
|
+
styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full);forced-color-adjust:none}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-xl))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--uppercase{text-transform:uppercase}.ea-badge--pin{justify-content:center;box-sizing:border-box;min-width:var(--ea-badge-size, 1.8em);height:var(--ea-badge-size, 1.8em);padding:0 .375em;font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--xs{font-size:var(--ea-badge-font-size, calc(var(--font-size-xs) * .75))}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, calc(var(--font-size-sm) * .75))}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, calc(var(--font-size-md) * .75))}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, calc(var(--font-size-lg) * .75))}.ea-badge--pin.ea-badge--xl{font-size:var(--ea-badge-font-size, calc(var(--font-size-xl) * .75))}\n"],
|
|
8149
8358
|
dependencies: [{
|
|
8150
8359
|
kind: "directive",
|
|
8151
8360
|
type: NgClass,
|
|
@@ -8169,7 +8378,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8169
8378
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
8170
8379
|
encapsulation: ViewEncapsulation.None,
|
|
8171
8380
|
template: "<span\n class=\"ea-badge\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n</span>\n",
|
|
8172
|
-
styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full);forced-color-adjust:none}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-
|
|
8381
|
+
styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full);forced-color-adjust:none}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-xl))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--uppercase{text-transform:uppercase}.ea-badge--pin{justify-content:center;box-sizing:border-box;min-width:var(--ea-badge-size, 1.8em);height:var(--ea-badge-size, 1.8em);padding:0 .375em;font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--xs{font-size:var(--ea-badge-font-size, calc(var(--font-size-xs) * .75))}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, calc(var(--font-size-sm) * .75))}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, calc(var(--font-size-md) * .75))}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, calc(var(--font-size-lg) * .75))}.ea-badge--pin.ea-badge--xl{font-size:var(--ea-badge-font-size, calc(var(--font-size-xl) * .75))}\n"]
|
|
8173
8382
|
}]
|
|
8174
8383
|
}],
|
|
8175
8384
|
propDecorators: {
|
|
@@ -8207,6 +8416,804 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8207
8416
|
}]
|
|
8208
8417
|
}
|
|
8209
8418
|
});
|
|
8419
|
+
function intlLocalizes(locale) {
|
|
8420
|
+
try {
|
|
8421
|
+
return new Intl.NumberFormat(locale).resolvedOptions().locale.split("-")[0] === locale.split("-")[0];
|
|
8422
|
+
} catch {
|
|
8423
|
+
return false;
|
|
8424
|
+
}
|
|
8425
|
+
}
|
|
8426
|
+
function groupInteger(digits, sep, grouping) {
|
|
8427
|
+
const primary = grouping[0] ?? 3;
|
|
8428
|
+
const secondary = grouping[1] ?? primary;
|
|
8429
|
+
if (digits.length <= primary) return digits;
|
|
8430
|
+
let result = digits.slice(digits.length - primary);
|
|
8431
|
+
let rest = digits.slice(0, digits.length - primary);
|
|
8432
|
+
while (rest.length > 0) {
|
|
8433
|
+
const take = Math.min(secondary, rest.length);
|
|
8434
|
+
result = `${rest.slice(rest.length - take)}${sep}${result}`;
|
|
8435
|
+
rest = rest.slice(0, rest.length - take);
|
|
8436
|
+
}
|
|
8437
|
+
return result;
|
|
8438
|
+
}
|
|
8439
|
+
function formatGroupedNumber(value, locale, format, options) {
|
|
8440
|
+
if (intlLocalizes(locale)) return value.toLocaleString(locale, options);
|
|
8441
|
+
if (!isFinite(value)) return String(value);
|
|
8442
|
+
const magnitude = Math.abs(value).toString();
|
|
8443
|
+
if (magnitude.includes("e") || magnitude.includes("E")) return value.toString();
|
|
8444
|
+
const [intPart, fracPart] = magnitude.split(".");
|
|
8445
|
+
const grouped = groupInteger(intPart, format.group, format.grouping);
|
|
8446
|
+
const body = fracPart != null ? `${grouped}${format.decimal}${fracPart}` : grouped;
|
|
8447
|
+
return value < 0 ? `-${body}` : body;
|
|
8448
|
+
}
|
|
8449
|
+
function chartColor(index, override) {
|
|
8450
|
+
return override || `var(--color-chart-${index % 8 + 1})`;
|
|
8451
|
+
}
|
|
8452
|
+
function niceStep(span, maxTicks) {
|
|
8453
|
+
const raw = span / Math.max(1, maxTicks);
|
|
8454
|
+
const magnitude = Math.pow(10, Math.floor(Math.log10(raw)));
|
|
8455
|
+
const fraction = raw / magnitude;
|
|
8456
|
+
return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * magnitude;
|
|
8457
|
+
}
|
|
8458
|
+
function niceScale(min, max, maxTicks = 5) {
|
|
8459
|
+
if (!isFinite(min) || !isFinite(max)) return {
|
|
8460
|
+
min: 0,
|
|
8461
|
+
max: 1,
|
|
8462
|
+
ticks: [0, 1]
|
|
8463
|
+
};
|
|
8464
|
+
if (min === max) {
|
|
8465
|
+
const pad = min === 0 ? 1 : Math.abs(min) * .5;
|
|
8466
|
+
min -= min === 0 ? 0 : pad;
|
|
8467
|
+
max += pad;
|
|
8468
|
+
}
|
|
8469
|
+
const step = niceStep(max - min, maxTicks);
|
|
8470
|
+
const niceMin = Math.floor(min / step) * step;
|
|
8471
|
+
const niceMax = Math.ceil(max / step) * step;
|
|
8472
|
+
const ticks = [];
|
|
8473
|
+
const precision = Math.max(0, -Math.floor(Math.log10(step)) + 1);
|
|
8474
|
+
for (let tick = niceMin; tick <= niceMax + step / 2; tick += step) ticks.push(Number(tick.toFixed(precision)));
|
|
8475
|
+
return {
|
|
8476
|
+
min: niceMin,
|
|
8477
|
+
max: niceMax,
|
|
8478
|
+
ticks
|
|
8479
|
+
};
|
|
8480
|
+
}
|
|
8481
|
+
function estimateTextWidth(text, fontPx) {
|
|
8482
|
+
return text.length * fontPx * .6;
|
|
8483
|
+
}
|
|
8484
|
+
function injectChartViewport(size) {
|
|
8485
|
+
const host = inject(ElementRef).nativeElement;
|
|
8486
|
+
const destroyRef = inject(DestroyRef);
|
|
8487
|
+
const width = signal(480, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
|
|
8488
|
+
const fontSize = signal(16, ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
|
|
8489
|
+
const measure = () => {
|
|
8490
|
+
if (host.clientWidth > 0) width.set(host.clientWidth);
|
|
8491
|
+
const font = parseFloat(getComputedStyle(host).fontSize);
|
|
8492
|
+
if (font > 0) fontSize.set(font);
|
|
8493
|
+
};
|
|
8494
|
+
afterNextRender(() => {
|
|
8495
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
8496
|
+
const observer = new ResizeObserver(measure);
|
|
8497
|
+
observer.observe(host);
|
|
8498
|
+
destroyRef.onDestroy(() => observer.disconnect());
|
|
8499
|
+
}
|
|
8500
|
+
});
|
|
8501
|
+
afterRenderEffect(() => {
|
|
8502
|
+
size();
|
|
8503
|
+
measure();
|
|
8504
|
+
});
|
|
8505
|
+
return {
|
|
8506
|
+
width: width.asReadonly(),
|
|
8507
|
+
fontSize: fontSize.asReadonly()
|
|
8508
|
+
};
|
|
8509
|
+
}
|
|
8510
|
+
function injectChartFormatter(formatValue) {
|
|
8511
|
+
const i18n = inject(EagamiI18nService);
|
|
8512
|
+
return computed(() => {
|
|
8513
|
+
const custom = formatValue();
|
|
8514
|
+
if (custom) return custom;
|
|
8515
|
+
const locale = i18n.locale();
|
|
8516
|
+
const format = i18n.messages().numberFormat;
|
|
8517
|
+
return (value) => formatGroupedNumber(value, locale, format, { maximumFractionDigits: 2 });
|
|
8518
|
+
});
|
|
8519
|
+
}
|
|
8520
|
+
function clamp$1(value, min, max) {
|
|
8521
|
+
return Math.min(max, Math.max(min, value));
|
|
8522
|
+
}
|
|
8523
|
+
const BAR_GAP = 2;
|
|
8524
|
+
const BAR_RADIUS = 4;
|
|
8525
|
+
function barPath(x, y, w, h, side) {
|
|
8526
|
+
const r = side ? Math.max(0, side === "top" || side === "bottom" ? Math.min(BAR_RADIUS, w / 2, h) : Math.min(BAR_RADIUS, h / 2, w)) : 0;
|
|
8527
|
+
const arc = (tx, ty) => `A${r},${r} 0 0 1 ${tx},${ty}`;
|
|
8528
|
+
switch (r > 0 ? side : null) {
|
|
8529
|
+
case "top": return `M${x},${y + h}V${y + r}${arc(x + r, y)}H${x + w - r}${arc(x + w, y + r)}V${y + h}Z`;
|
|
8530
|
+
case "bottom": return `M${x},${y}H${x + w}V${y + h - r}${arc(x + w - r, y + h)}H${x + r}${arc(x, y + h - r)}Z`;
|
|
8531
|
+
case "right": return `M${x},${y}H${x + w - r}${arc(x + w, y + r)}V${y + h - r}${arc(x + w - r, y + h)}H${x}Z`;
|
|
8532
|
+
case "left": return `M${x + w},${y}V${y + h}H${x + r}${arc(x, y + h - r)}V${y + r}${arc(x + r, y)}Z`;
|
|
8533
|
+
default: return `M${x},${y}H${x + w}V${y + h}H${x}Z`;
|
|
8534
|
+
}
|
|
8535
|
+
}
|
|
8536
|
+
function truncate(text, maxWidth, fontPx) {
|
|
8537
|
+
if (estimateTextWidth(text, fontPx) <= maxWidth) return text;
|
|
8538
|
+
const chars = Math.max(1, Math.floor(maxWidth / (fontPx * .6)) - 1);
|
|
8539
|
+
return `${text.slice(0, chars)}…`;
|
|
8540
|
+
}
|
|
8541
|
+
var BarChartComponent = class BarChartComponent {
|
|
8542
|
+
i18n = inject(EagamiI18nService);
|
|
8543
|
+
labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
|
|
8544
|
+
series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
8545
|
+
orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
|
|
8546
|
+
stacked = input(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []);
|
|
8547
|
+
showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
|
|
8548
|
+
showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
|
|
8549
|
+
showValues = input(false, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
|
|
8550
|
+
height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
8551
|
+
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
8552
|
+
animation = input("grow", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
|
|
8553
|
+
animationDuration = input(600, ...ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []);
|
|
8554
|
+
formatValue = input(null, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
|
|
8555
|
+
ariaLabel = input(void 0, {
|
|
8556
|
+
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
8557
|
+
alias: "aria-label"
|
|
8558
|
+
});
|
|
8559
|
+
pointClick = output();
|
|
8560
|
+
activePointChange = output();
|
|
8561
|
+
viewport = injectChartViewport(this.size);
|
|
8562
|
+
format = injectChartFormatter(this.formatValue);
|
|
8563
|
+
active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
|
|
8564
|
+
label = computed(() => this.ariaLabel() || this.i18n.messages().chart.barChart, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
8565
|
+
count = computed(() => Math.max(this.labels().length, ...this.series().map((s) => s.data.length), 0), ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
|
|
8566
|
+
hasData = computed(() => this.series().some((s) => s.data.some((v) => v != null && isFinite(v))), ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
|
|
8567
|
+
renderPass = computed(() => {
|
|
8568
|
+
this.labels();
|
|
8569
|
+
this.series();
|
|
8570
|
+
this.orientation();
|
|
8571
|
+
this.stacked();
|
|
8572
|
+
this.animation();
|
|
8573
|
+
this.animationDuration();
|
|
8574
|
+
return [{}];
|
|
8575
|
+
}, ...ngDevMode ? [{ debugName: "renderPass" }] : /* istanbul ignore next */ []);
|
|
8576
|
+
hostClasses = computed(() => ({
|
|
8577
|
+
[`ea-bar-chart--${this.size()}`]: true,
|
|
8578
|
+
[`ea-bar-chart--${this.orientation()}`]: true,
|
|
8579
|
+
[`ea-bar-chart--animate-${this.animation()}`]: true
|
|
8580
|
+
}), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
|
|
8581
|
+
layout = computed(() => {
|
|
8582
|
+
const vertical = this.orientation() === "vertical";
|
|
8583
|
+
const stacked = this.stacked();
|
|
8584
|
+
const count = Math.max(1, this.count());
|
|
8585
|
+
const series = this.series();
|
|
8586
|
+
const width = this.viewport.width();
|
|
8587
|
+
const height = this.height();
|
|
8588
|
+
const fontPx = this.viewport.fontSize();
|
|
8589
|
+
const axisPx = fontPx * .75;
|
|
8590
|
+
const format = this.format();
|
|
8591
|
+
const valueAt = (s, i) => {
|
|
8592
|
+
const value = series[s]?.data[i];
|
|
8593
|
+
return value == null || !isFinite(value) ? null : value;
|
|
8594
|
+
};
|
|
8595
|
+
let lo = 0;
|
|
8596
|
+
let hi = 0;
|
|
8597
|
+
for (let i = 0; i < count; i++) {
|
|
8598
|
+
let up = 0;
|
|
8599
|
+
let down = 0;
|
|
8600
|
+
series.forEach((_, s) => {
|
|
8601
|
+
const value = valueAt(s, i) ?? 0;
|
|
8602
|
+
if (stacked) {
|
|
8603
|
+
up += Math.max(0, value);
|
|
8604
|
+
down += Math.min(0, value);
|
|
8605
|
+
} else {
|
|
8606
|
+
up = Math.max(up, value);
|
|
8607
|
+
down = Math.min(down, value);
|
|
8608
|
+
}
|
|
8609
|
+
});
|
|
8610
|
+
hi = Math.max(hi, up);
|
|
8611
|
+
lo = Math.min(lo, down);
|
|
8612
|
+
}
|
|
8613
|
+
const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
|
|
8614
|
+
const valueRoom = this.showValues() ? axisPx * 1.5 : 0;
|
|
8615
|
+
const provisionalTicks = niceScale(lo, hi).ticks.map(format);
|
|
8616
|
+
const widestTick = Math.max(0, ...provisionalTicks.map((t) => estimateTextWidth(t, axisPx)));
|
|
8617
|
+
let left;
|
|
8618
|
+
let right;
|
|
8619
|
+
let top;
|
|
8620
|
+
let bottom;
|
|
8621
|
+
let categoryText;
|
|
8622
|
+
if (vertical) {
|
|
8623
|
+
left = widestTick + axisPx;
|
|
8624
|
+
right = axisPx / 2;
|
|
8625
|
+
top = axisPx + valueRoom;
|
|
8626
|
+
bottom = axisPx * 2.5;
|
|
8627
|
+
categoryText = labelTexts;
|
|
8628
|
+
} else {
|
|
8629
|
+
const maxLabel = width * .3;
|
|
8630
|
+
categoryText = labelTexts.map((t) => truncate(t, maxLabel, axisPx));
|
|
8631
|
+
left = Math.max(0, ...categoryText.map((t) => estimateTextWidth(t, axisPx))) + axisPx;
|
|
8632
|
+
right = Math.max(widestTick / 2, this.showValues() ? widestTick + axisPx : 0) + axisPx / 2;
|
|
8633
|
+
top = axisPx / 2;
|
|
8634
|
+
bottom = axisPx * 2.5;
|
|
8635
|
+
}
|
|
8636
|
+
const plotWidth = Math.max(1, width - left - right);
|
|
8637
|
+
const plotHeight = Math.max(1, height - top - bottom);
|
|
8638
|
+
const scale = niceScale(lo, hi, Math.max(2, Math.floor((vertical ? plotHeight : plotWidth) / (vertical ? axisPx * 3 : widestTick + axisPx * 2))));
|
|
8639
|
+
const { min, max } = scale;
|
|
8640
|
+
const valuePos = (v) => {
|
|
8641
|
+
const t = (clamp$1(v, min, max) - min) / (max - min || 1);
|
|
8642
|
+
return vertical ? top + (1 - t) * plotHeight : left + t * plotWidth;
|
|
8643
|
+
};
|
|
8644
|
+
const baseline = valuePos(clamp$1(0, min, max));
|
|
8645
|
+
const categoryLength = vertical ? plotWidth : plotHeight;
|
|
8646
|
+
const categoryStart = vertical ? left : top;
|
|
8647
|
+
const band = categoryLength / count;
|
|
8648
|
+
const thicknessCap = fontPx * 1.5;
|
|
8649
|
+
const seriesCount = Math.max(1, series.length);
|
|
8650
|
+
const thickness = stacked ? Math.min(band * .6, thicknessCap) : Math.max(1, Math.min((band * .75 - BAR_GAP * (seriesCount - 1)) / seriesCount, thicknessCap));
|
|
8651
|
+
const groupWidth = stacked ? thickness : seriesCount * thickness + (seriesCount - 1) * BAR_GAP;
|
|
8652
|
+
const duration = this.animationDuration();
|
|
8653
|
+
const cascadeStep = count > 1 ? duration * .5 / (count - 1) : 0;
|
|
8654
|
+
const bars = [];
|
|
8655
|
+
const valueLabels = [];
|
|
8656
|
+
const toRect = (cat0, v0, v1, side) => {
|
|
8657
|
+
const [a, b] = [Math.min(v0, v1), Math.max(v0, v1)];
|
|
8658
|
+
return vertical ? barPath(cat0, a, thickness, b - a, side) : barPath(a, cat0, b - a, thickness, side);
|
|
8659
|
+
};
|
|
8660
|
+
const labelFor = (cat0, tip, value, negative) => {
|
|
8661
|
+
const offset = axisPx * .5;
|
|
8662
|
+
const text = format(value);
|
|
8663
|
+
return vertical ? {
|
|
8664
|
+
x: cat0 + thickness / 2,
|
|
8665
|
+
y: negative ? tip + offset + axisPx : tip - offset,
|
|
8666
|
+
text,
|
|
8667
|
+
anchor: "middle"
|
|
8668
|
+
} : {
|
|
8669
|
+
x: negative ? tip - offset : tip + offset,
|
|
8670
|
+
y: cat0 + thickness / 2,
|
|
8671
|
+
text,
|
|
8672
|
+
anchor: negative ? "end" : "start"
|
|
8673
|
+
};
|
|
8674
|
+
};
|
|
8675
|
+
for (let index = 0; index < count; index++) {
|
|
8676
|
+
const bandStart = categoryStart + index * band + (band - groupWidth) / 2;
|
|
8677
|
+
const delay = index * cascadeStep;
|
|
8678
|
+
if (stacked) {
|
|
8679
|
+
const segments = series.map((_, s) => ({
|
|
8680
|
+
s,
|
|
8681
|
+
value: valueAt(s, index)
|
|
8682
|
+
})).filter((seg) => !!seg.value);
|
|
8683
|
+
for (const direction of [1, -1]) {
|
|
8684
|
+
const run = segments.filter((seg) => Math.sign(seg.value) === direction);
|
|
8685
|
+
let sum = 0;
|
|
8686
|
+
run.forEach((seg, i) => {
|
|
8687
|
+
const from = valuePos(sum);
|
|
8688
|
+
sum += seg.value;
|
|
8689
|
+
const to = valuePos(sum);
|
|
8690
|
+
const towardTip = Math.sign(to - from);
|
|
8691
|
+
const start = i === 0 ? from : from + towardTip * BAR_GAP;
|
|
8692
|
+
const side = i === run.length - 1 ? vertical ? direction > 0 ? "top" : "bottom" : direction > 0 ? "right" : "left" : null;
|
|
8693
|
+
if (Math.abs(to - start) > 0) bars.push({
|
|
8694
|
+
series: seg.s,
|
|
8695
|
+
index,
|
|
8696
|
+
value: seg.value,
|
|
8697
|
+
color: chartColor(seg.s, series[seg.s].color),
|
|
8698
|
+
path: toRect(bandStart, start, to, side),
|
|
8699
|
+
delay
|
|
8700
|
+
});
|
|
8701
|
+
});
|
|
8702
|
+
if (this.showValues() && run.length) valueLabels.push({
|
|
8703
|
+
key: `${index}-${direction}`,
|
|
8704
|
+
...labelFor(bandStart, valuePos(sum), sum, direction < 0)
|
|
8705
|
+
});
|
|
8706
|
+
}
|
|
8707
|
+
} else series.forEach((s, seriesIndex) => {
|
|
8708
|
+
const value = valueAt(seriesIndex, index);
|
|
8709
|
+
if (value == null) return;
|
|
8710
|
+
const cat0 = bandStart + seriesIndex * (thickness + BAR_GAP);
|
|
8711
|
+
const tip = valuePos(value);
|
|
8712
|
+
const negative = value < 0;
|
|
8713
|
+
const side = vertical ? negative ? "bottom" : "top" : negative ? "left" : "right";
|
|
8714
|
+
if (tip !== baseline) bars.push({
|
|
8715
|
+
series: seriesIndex,
|
|
8716
|
+
index,
|
|
8717
|
+
value,
|
|
8718
|
+
color: chartColor(seriesIndex, s.color),
|
|
8719
|
+
path: toRect(cat0, baseline, tip, side),
|
|
8720
|
+
delay
|
|
8721
|
+
});
|
|
8722
|
+
if (this.showValues()) valueLabels.push({
|
|
8723
|
+
key: `${index}-${seriesIndex}`,
|
|
8724
|
+
...labelFor(cat0, tip, value, negative)
|
|
8725
|
+
});
|
|
8726
|
+
});
|
|
8727
|
+
}
|
|
8728
|
+
const ticks = scale.ticks.map((value) => ({
|
|
8729
|
+
value,
|
|
8730
|
+
text: format(value),
|
|
8731
|
+
pos: valuePos(value)
|
|
8732
|
+
}));
|
|
8733
|
+
const widestCategory = Math.max(0, ...categoryText.map((t) => estimateTextWidth(t, axisPx)));
|
|
8734
|
+
const labelStep = vertical ? Math.max(1, Math.ceil((widestCategory + axisPx) / band)) : 1;
|
|
8735
|
+
const categories = categoryText.map((text, index) => ({
|
|
8736
|
+
text,
|
|
8737
|
+
index,
|
|
8738
|
+
pos: categoryStart + (index + .5) * band
|
|
8739
|
+
})).filter((c) => c.index % labelStep === 0);
|
|
8740
|
+
return {
|
|
8741
|
+
vertical,
|
|
8742
|
+
width,
|
|
8743
|
+
height,
|
|
8744
|
+
top,
|
|
8745
|
+
left,
|
|
8746
|
+
plotWidth,
|
|
8747
|
+
plotHeight,
|
|
8748
|
+
baseline,
|
|
8749
|
+
band,
|
|
8750
|
+
categoryStart,
|
|
8751
|
+
groupWidth,
|
|
8752
|
+
thickness,
|
|
8753
|
+
axisPx,
|
|
8754
|
+
ticks,
|
|
8755
|
+
categories,
|
|
8756
|
+
bars,
|
|
8757
|
+
valueLabels,
|
|
8758
|
+
valuePos
|
|
8759
|
+
};
|
|
8760
|
+
}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
|
|
8761
|
+
tooltip = computed(() => {
|
|
8762
|
+
const active = this.active();
|
|
8763
|
+
if (!active) return null;
|
|
8764
|
+
const layout = this.layout();
|
|
8765
|
+
const center = layout.categoryStart + (active.index + .5) * layout.band;
|
|
8766
|
+
const tipValue = this.stacked() ? this.stackEnd(active.series, active.index) : this.valueAt(active.series, active.index) ?? 0;
|
|
8767
|
+
const tip = layout.valuePos(tipValue);
|
|
8768
|
+
const x = layout.vertical ? center : tip;
|
|
8769
|
+
const y = layout.vertical ? Math.min(tip, layout.baseline) : center;
|
|
8770
|
+
const rows = this.series().map((s, i) => ({
|
|
8771
|
+
name: s.name,
|
|
8772
|
+
color: chartColor(i, s.color),
|
|
8773
|
+
value: this.tableValue(s.data[active.index]),
|
|
8774
|
+
active: i === active.series
|
|
8775
|
+
}));
|
|
8776
|
+
return {
|
|
8777
|
+
x,
|
|
8778
|
+
y,
|
|
8779
|
+
title: this.labels()[active.index] ?? "",
|
|
8780
|
+
rows,
|
|
8781
|
+
key: `${active.series}-${active.index}`
|
|
8782
|
+
};
|
|
8783
|
+
}, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
|
|
8784
|
+
tooltips = computed(() => {
|
|
8785
|
+
const tip = this.tooltip();
|
|
8786
|
+
return tip ? [tip] : [];
|
|
8787
|
+
}, ...ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []);
|
|
8788
|
+
announcement = computed(() => {
|
|
8789
|
+
const event = this.eventFor(this.active());
|
|
8790
|
+
return event ? this.i18n.messages().chart.point(event.seriesName, event.label, this.format()(event.value)) : "";
|
|
8791
|
+
}, ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
|
|
8792
|
+
showsLegend = computed(() => this.showLegend() && this.series().length > 1, ...ngDevMode ? [{ debugName: "showsLegend" }] : /* istanbul ignore next */ []);
|
|
8793
|
+
seriesColor(index) {
|
|
8794
|
+
return chartColor(index, this.series()[index]?.color);
|
|
8795
|
+
}
|
|
8796
|
+
isDimmed(bar) {
|
|
8797
|
+
const active = this.active();
|
|
8798
|
+
return !!active && (active.series !== bar.series || active.index !== bar.index);
|
|
8799
|
+
}
|
|
8800
|
+
tableValue(value) {
|
|
8801
|
+
return value == null || !isFinite(value) ? "–" : this.format()(value);
|
|
8802
|
+
}
|
|
8803
|
+
onPointerMove(event) {
|
|
8804
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
8805
|
+
const layout = this.layout();
|
|
8806
|
+
const px = event.clientX - rect.left;
|
|
8807
|
+
const py = event.clientY - rect.top;
|
|
8808
|
+
const along = layout.vertical ? px : py;
|
|
8809
|
+
const across = layout.vertical ? py : px;
|
|
8810
|
+
const index = Math.floor((along - layout.categoryStart) / layout.band);
|
|
8811
|
+
if (index < 0 || index >= this.count()) {
|
|
8812
|
+
this.setActive(null);
|
|
8813
|
+
return;
|
|
8814
|
+
}
|
|
8815
|
+
const candidates = this.series().map((_, s) => s).filter((s) => this.valueAt(s, index) != null);
|
|
8816
|
+
if (!candidates.length) {
|
|
8817
|
+
this.setActive(null);
|
|
8818
|
+
return;
|
|
8819
|
+
}
|
|
8820
|
+
let series;
|
|
8821
|
+
if (this.stacked()) series = candidates.find((s) => {
|
|
8822
|
+
const end = layout.valuePos(this.stackEnd(s, index));
|
|
8823
|
+
const start = layout.valuePos(this.stackEnd(s, index) - (this.valueAt(s, index) ?? 0));
|
|
8824
|
+
return across >= Math.min(start, end) && across <= Math.max(start, end);
|
|
8825
|
+
}) ?? candidates[candidates.length - 1];
|
|
8826
|
+
else {
|
|
8827
|
+
const bandStart = layout.categoryStart + index * layout.band + (layout.band - layout.groupWidth) / 2;
|
|
8828
|
+
const slot = Math.floor((along - bandStart) / (layout.thickness + BAR_GAP));
|
|
8829
|
+
series = candidates.reduce((best, s) => Math.abs(s - slot) < Math.abs(best - slot) ? s : best);
|
|
8830
|
+
}
|
|
8831
|
+
this.setActive({
|
|
8832
|
+
series,
|
|
8833
|
+
index
|
|
8834
|
+
});
|
|
8835
|
+
}
|
|
8836
|
+
onPointerLeave() {
|
|
8837
|
+
this.setActive(null);
|
|
8838
|
+
}
|
|
8839
|
+
onClick() {
|
|
8840
|
+
const event = this.eventFor(this.active());
|
|
8841
|
+
if (event) this.pointClick.emit(event);
|
|
8842
|
+
}
|
|
8843
|
+
onFocus() {
|
|
8844
|
+
if (!this.active()) this.setActive(this.firstIn(0, 1));
|
|
8845
|
+
}
|
|
8846
|
+
onBlur() {
|
|
8847
|
+
this.setActive(null);
|
|
8848
|
+
}
|
|
8849
|
+
onKeydown(event) {
|
|
8850
|
+
const vertical = this.orientation() === "vertical";
|
|
8851
|
+
if (!this.active() && event.key.startsWith("Arrow")) {
|
|
8852
|
+
event.preventDefault();
|
|
8853
|
+
this.setActive(this.firstIn(0, 1));
|
|
8854
|
+
return;
|
|
8855
|
+
}
|
|
8856
|
+
const active = this.active() ?? this.firstIn(0, 1);
|
|
8857
|
+
if (!active) return;
|
|
8858
|
+
const nextCategory = vertical ? "ArrowRight" : "ArrowDown";
|
|
8859
|
+
const prevCategory = vertical ? "ArrowLeft" : "ArrowUp";
|
|
8860
|
+
const nextSeries = vertical ? "ArrowUp" : "ArrowRight";
|
|
8861
|
+
const prevSeries = vertical ? "ArrowDown" : "ArrowLeft";
|
|
8862
|
+
let next = active;
|
|
8863
|
+
switch (event.key) {
|
|
8864
|
+
case nextCategory:
|
|
8865
|
+
next = this.firstIn(active.index + 1, 1, active.series) ?? active;
|
|
8866
|
+
break;
|
|
8867
|
+
case prevCategory:
|
|
8868
|
+
next = this.firstIn(active.index - 1, -1, active.series) ?? active;
|
|
8869
|
+
break;
|
|
8870
|
+
case "Home":
|
|
8871
|
+
next = this.firstIn(0, 1, active.series) ?? active;
|
|
8872
|
+
break;
|
|
8873
|
+
case "End":
|
|
8874
|
+
next = this.firstIn(this.count() - 1, -1, active.series) ?? active;
|
|
8875
|
+
break;
|
|
8876
|
+
case nextSeries:
|
|
8877
|
+
case prevSeries: {
|
|
8878
|
+
const step = event.key === nextSeries ? 1 : -1;
|
|
8879
|
+
const seriesCount = this.series().length;
|
|
8880
|
+
for (let hop = 1; hop < seriesCount; hop++) {
|
|
8881
|
+
const series = (active.series + step * hop + seriesCount) % seriesCount;
|
|
8882
|
+
if (this.valueAt(series, active.index) != null) {
|
|
8883
|
+
next = {
|
|
8884
|
+
series,
|
|
8885
|
+
index: active.index
|
|
8886
|
+
};
|
|
8887
|
+
break;
|
|
8888
|
+
}
|
|
8889
|
+
}
|
|
8890
|
+
break;
|
|
8891
|
+
}
|
|
8892
|
+
case "Enter":
|
|
8893
|
+
case " ":
|
|
8894
|
+
this.onClick();
|
|
8895
|
+
break;
|
|
8896
|
+
case "Escape":
|
|
8897
|
+
next = null;
|
|
8898
|
+
break;
|
|
8899
|
+
default: return;
|
|
8900
|
+
}
|
|
8901
|
+
event.preventDefault();
|
|
8902
|
+
this.setActive(next);
|
|
8903
|
+
}
|
|
8904
|
+
valueAt(series, index) {
|
|
8905
|
+
const value = this.series()[series]?.data[index];
|
|
8906
|
+
return value == null || !isFinite(value) ? null : value;
|
|
8907
|
+
}
|
|
8908
|
+
stackEnd(series, index) {
|
|
8909
|
+
const own = this.valueAt(series, index) ?? 0;
|
|
8910
|
+
let sum = 0;
|
|
8911
|
+
for (let s = 0; s <= series; s++) {
|
|
8912
|
+
const value = this.valueAt(s, index) ?? 0;
|
|
8913
|
+
if (Math.sign(value) === Math.sign(own)) sum += value;
|
|
8914
|
+
}
|
|
8915
|
+
return sum;
|
|
8916
|
+
}
|
|
8917
|
+
firstIn(index, step, series) {
|
|
8918
|
+
for (let i = index; i >= 0 && i < this.count(); i += step) {
|
|
8919
|
+
if (series !== void 0 && this.valueAt(series, i) != null) return {
|
|
8920
|
+
series,
|
|
8921
|
+
index: i
|
|
8922
|
+
};
|
|
8923
|
+
const any = this.series().findIndex((_, s) => this.valueAt(s, i) != null);
|
|
8924
|
+
if (any !== -1) return {
|
|
8925
|
+
series: any,
|
|
8926
|
+
index: i
|
|
8927
|
+
};
|
|
8928
|
+
}
|
|
8929
|
+
return null;
|
|
8930
|
+
}
|
|
8931
|
+
eventFor(active) {
|
|
8932
|
+
if (!active) return null;
|
|
8933
|
+
const value = this.valueAt(active.series, active.index);
|
|
8934
|
+
if (value == null) return null;
|
|
8935
|
+
return {
|
|
8936
|
+
seriesIndex: active.series,
|
|
8937
|
+
seriesName: this.series()[active.series].name,
|
|
8938
|
+
index: active.index,
|
|
8939
|
+
label: this.labels()[active.index] ?? "",
|
|
8940
|
+
value
|
|
8941
|
+
};
|
|
8942
|
+
}
|
|
8943
|
+
setActive(next) {
|
|
8944
|
+
const current = this.active();
|
|
8945
|
+
if (current?.series === next?.series && current?.index === next?.index) return;
|
|
8946
|
+
this.active.set(next);
|
|
8947
|
+
this.activePointChange.emit(this.eventFor(next));
|
|
8948
|
+
}
|
|
8949
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8950
|
+
minVersion: "12.0.0",
|
|
8951
|
+
version: "22.2.0",
|
|
8952
|
+
ngImport: i0,
|
|
8953
|
+
type: BarChartComponent,
|
|
8954
|
+
deps: [],
|
|
8955
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
8956
|
+
});
|
|
8957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
8958
|
+
minVersion: "17.0.0",
|
|
8959
|
+
version: "22.2.0",
|
|
8960
|
+
type: BarChartComponent,
|
|
8961
|
+
isStandalone: true,
|
|
8962
|
+
selector: "ea-bar-chart",
|
|
8963
|
+
inputs: {
|
|
8964
|
+
labels: {
|
|
8965
|
+
classPropertyName: "labels",
|
|
8966
|
+
publicName: "labels",
|
|
8967
|
+
isSignal: true,
|
|
8968
|
+
isRequired: false,
|
|
8969
|
+
transformFunction: null
|
|
8970
|
+
},
|
|
8971
|
+
series: {
|
|
8972
|
+
classPropertyName: "series",
|
|
8973
|
+
publicName: "series",
|
|
8974
|
+
isSignal: true,
|
|
8975
|
+
isRequired: false,
|
|
8976
|
+
transformFunction: null
|
|
8977
|
+
},
|
|
8978
|
+
orientation: {
|
|
8979
|
+
classPropertyName: "orientation",
|
|
8980
|
+
publicName: "orientation",
|
|
8981
|
+
isSignal: true,
|
|
8982
|
+
isRequired: false,
|
|
8983
|
+
transformFunction: null
|
|
8984
|
+
},
|
|
8985
|
+
stacked: {
|
|
8986
|
+
classPropertyName: "stacked",
|
|
8987
|
+
publicName: "stacked",
|
|
8988
|
+
isSignal: true,
|
|
8989
|
+
isRequired: false,
|
|
8990
|
+
transformFunction: null
|
|
8991
|
+
},
|
|
8992
|
+
showGrid: {
|
|
8993
|
+
classPropertyName: "showGrid",
|
|
8994
|
+
publicName: "showGrid",
|
|
8995
|
+
isSignal: true,
|
|
8996
|
+
isRequired: false,
|
|
8997
|
+
transformFunction: null
|
|
8998
|
+
},
|
|
8999
|
+
showLegend: {
|
|
9000
|
+
classPropertyName: "showLegend",
|
|
9001
|
+
publicName: "showLegend",
|
|
9002
|
+
isSignal: true,
|
|
9003
|
+
isRequired: false,
|
|
9004
|
+
transformFunction: null
|
|
9005
|
+
},
|
|
9006
|
+
showValues: {
|
|
9007
|
+
classPropertyName: "showValues",
|
|
9008
|
+
publicName: "showValues",
|
|
9009
|
+
isSignal: true,
|
|
9010
|
+
isRequired: false,
|
|
9011
|
+
transformFunction: null
|
|
9012
|
+
},
|
|
9013
|
+
height: {
|
|
9014
|
+
classPropertyName: "height",
|
|
9015
|
+
publicName: "height",
|
|
9016
|
+
isSignal: true,
|
|
9017
|
+
isRequired: false,
|
|
9018
|
+
transformFunction: null
|
|
9019
|
+
},
|
|
9020
|
+
size: {
|
|
9021
|
+
classPropertyName: "size",
|
|
9022
|
+
publicName: "size",
|
|
9023
|
+
isSignal: true,
|
|
9024
|
+
isRequired: false,
|
|
9025
|
+
transformFunction: null
|
|
9026
|
+
},
|
|
9027
|
+
animation: {
|
|
9028
|
+
classPropertyName: "animation",
|
|
9029
|
+
publicName: "animation",
|
|
9030
|
+
isSignal: true,
|
|
9031
|
+
isRequired: false,
|
|
9032
|
+
transformFunction: null
|
|
9033
|
+
},
|
|
9034
|
+
animationDuration: {
|
|
9035
|
+
classPropertyName: "animationDuration",
|
|
9036
|
+
publicName: "animationDuration",
|
|
9037
|
+
isSignal: true,
|
|
9038
|
+
isRequired: false,
|
|
9039
|
+
transformFunction: null
|
|
9040
|
+
},
|
|
9041
|
+
formatValue: {
|
|
9042
|
+
classPropertyName: "formatValue",
|
|
9043
|
+
publicName: "formatValue",
|
|
9044
|
+
isSignal: true,
|
|
9045
|
+
isRequired: false,
|
|
9046
|
+
transformFunction: null
|
|
9047
|
+
},
|
|
9048
|
+
ariaLabel: {
|
|
9049
|
+
classPropertyName: "ariaLabel",
|
|
9050
|
+
publicName: "aria-label",
|
|
9051
|
+
isSignal: true,
|
|
9052
|
+
isRequired: false,
|
|
9053
|
+
transformFunction: null
|
|
9054
|
+
}
|
|
9055
|
+
},
|
|
9056
|
+
outputs: {
|
|
9057
|
+
pointClick: "pointClick",
|
|
9058
|
+
activePointChange: "activePointChange"
|
|
9059
|
+
},
|
|
9060
|
+
ngImport: i0,
|
|
9061
|
+
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"category.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ category.text }}\n </text>\n } @else {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"category.pos\">\n {{ category.text }}\n </text>\n }\n }\n @for (bar of layout().bars; track $index) {\n <path\n class=\"ea-bar-chart__bar\"\n [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n [style.--ea-chart-color]=\"bar.color\"\n [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n [attr.d]=\"bar.path\" />\n }\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().baseline\"\n [attr.y2]=\"layout().baseline\" />\n } @else {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().baseline\"\n [attr.x2]=\"layout().baseline\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n <text\n class=\"ea-bar-chart__value\"\n [attr.text-anchor]=\"valueLabel.anchor\"\n [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n [attr.x]=\"valueLabel.x\"\n [attr.y]=\"valueLabel.y\">\n {{ valueLabel.text }}\n </text>\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-bar-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-bar-chart__tooltip\">\n <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-bar-chart__tooltip-row\"\n [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <table class=\"ea-bar-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-bar-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-bar-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-bar-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-bar-chart__legend-item\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
9062
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{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-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"],
|
|
9063
|
+
dependencies: [{
|
|
9064
|
+
kind: "directive",
|
|
9065
|
+
type: NgClass,
|
|
9066
|
+
selector: "[ngClass]",
|
|
9067
|
+
inputs: ["class", "ngClass"]
|
|
9068
|
+
}, {
|
|
9069
|
+
kind: "directive",
|
|
9070
|
+
type: TooltipDirective,
|
|
9071
|
+
selector: "[eaTooltip]",
|
|
9072
|
+
inputs: [
|
|
9073
|
+
"eaTooltip",
|
|
9074
|
+
"tooltipPosition",
|
|
9075
|
+
"flip",
|
|
9076
|
+
"whenClipped",
|
|
9077
|
+
"maxWidth",
|
|
9078
|
+
"dismissDelay",
|
|
9079
|
+
"tooltipOpen"
|
|
9080
|
+
]
|
|
9081
|
+
}],
|
|
9082
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
9083
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
9084
|
+
});
|
|
9085
|
+
};
|
|
9086
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
9087
|
+
minVersion: "12.0.0",
|
|
9088
|
+
version: "22.2.0",
|
|
9089
|
+
ngImport: i0,
|
|
9090
|
+
type: BarChartComponent,
|
|
9091
|
+
decorators: [{
|
|
9092
|
+
type: Component,
|
|
9093
|
+
args: [{
|
|
9094
|
+
selector: "ea-bar-chart",
|
|
9095
|
+
imports: [NgClass, TooltipDirective],
|
|
9096
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9097
|
+
encapsulation: ViewEncapsulation.None,
|
|
9098
|
+
template: "<div\n class=\"ea-bar-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-bar-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-bar-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-bar-chart-baseline]=\"layout().baseline + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-bar-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (layout().vertical) {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.pos\"\n [attr.y2]=\"tick.pos\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"tick.pos\">\n {{ tick.text }}\n </text>\n } @else {\n @if (showGrid()) {\n <line\n class=\"ea-bar-chart__grid\"\n [attr.x1]=\"tick.pos\"\n [attr.x2]=\"tick.pos\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ tick.text }}\n </text>\n }\n }\n @for (category of layout().categories; track category.index) {\n @if (layout().vertical) {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"middle\"\n [attr.x]=\"category.pos\"\n [attr.y]=\"layout().top + layout().plotHeight + layout().axisPx * 1.5\">\n {{ category.text }}\n </text>\n } @else {\n <text\n class=\"ea-bar-chart__axis\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().left - layout().axisPx / 2\"\n [attr.y]=\"category.pos\">\n {{ category.text }}\n </text>\n }\n }\n @for (bar of layout().bars; track $index) {\n <path\n class=\"ea-bar-chart__bar\"\n [class.ea-bar-chart__bar--dimmed]=\"isDimmed(bar)\"\n [style.--ea-chart-color]=\"bar.color\"\n [style.--ea-chart-delay]=\"bar.delay + 'ms'\"\n [attr.d]=\"bar.path\" />\n }\n @if (layout().vertical) {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().baseline\"\n [attr.y2]=\"layout().baseline\" />\n } @else {\n <line\n class=\"ea-bar-chart__baseline\"\n [attr.x1]=\"layout().baseline\"\n [attr.x2]=\"layout().baseline\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n @for (valueLabel of layout().valueLabels; track valueLabel.key) {\n <text\n class=\"ea-bar-chart__value\"\n [attr.text-anchor]=\"valueLabel.anchor\"\n [attr.dominant-baseline]=\"layout().vertical ? null : 'middle'\"\n [attr.x]=\"valueLabel.x\"\n [attr.y]=\"valueLabel.y\">\n {{ valueLabel.text }}\n </text>\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-bar-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-bar-chart__tooltip\">\n <span class=\"ea-bar-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-bar-chart__tooltip-row\"\n [class.ea-bar-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-bar-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-bar-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <table class=\"ea-bar-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-bar-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-bar-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-bar-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-bar-chart__legend-item\">\n <span\n class=\"ea-bar-chart__swatch\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
9099
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-bar-chart{display:block}.ea-bar-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-bar-chart--2xs{font-size:var(--font-size-2xs)}.ea-bar-chart--xs{font-size:var(--font-size-xs)}.ea-bar-chart--sm{font-size:var(--font-size-sm)}.ea-bar-chart--md{font-size:var(--font-size-md)}.ea-bar-chart--lg{font-size:var(--font-size-lg)}.ea-bar-chart--xl{font-size:var(--font-size-xl)}.ea-bar-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-bar-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-bar-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-bar-chart__plot svg{display:block;overflow:visible}.ea-bar-chart__svg{direction:ltr;touch-action:pan-y}.ea-bar-chart__hit{fill:transparent}.ea-bar-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-bar-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-bar-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-bar-chart__value{font-size:.75em;fill:var(--color-text-secondary);font-variant-numeric:tabular-nums;fill:var(--color-text-primary);pointer-events:none}.ea-bar-chart__bar{fill:var(--ea-chart-color);pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);transform-box:view-box}.ea-bar-chart__bar--dimmed{opacity:.35}.ea-bar-chart--vertical .ea-bar-chart__bar{transform-origin:0 var(--ea-bar-chart-baseline)}.ea-bar-chart--horizontal .ea-bar-chart__bar{transform-origin:var(--ea-bar-chart-baseline) 0}.ea-bar-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-bar-chart__anchor{fill:transparent}.ea-bar-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-bar-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-bar-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-bar-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-bar-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-bar-chart__table,.ea-bar-chart__live{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-bar-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-bar-chart--animate-grow.ea-bar-chart--vertical .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--vertical .ea-bar-chart__bar{animation-name:ea-chart-grow-y}.ea-bar-chart--animate-grow.ea-bar-chart--horizontal .ea-bar-chart__bar,.ea-bar-chart--animate-cascade.ea-bar-chart--horizontal .ea-bar-chart__bar{animation-name:ea-chart-grow-x}.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__bar,.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation:none}}.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .8);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-grow .ea-bar-chart__value,.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation:none}}.ea-bar-chart--animate-cascade .ea-bar-chart__bar{animation-delay:var(--ea-chart-delay, 0ms)}.ea-bar-chart--animate-cascade .ea-bar-chart__value{animation-delay:calc(var(--ea-chart-duration, .6s) * 1.3)}.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-bar-chart--animate-fade .ea-bar-chart__bar,.ea-bar-chart--animate-fade .ea-bar-chart__value{animation:none}}\n"]
|
|
9100
|
+
}]
|
|
9101
|
+
}],
|
|
9102
|
+
propDecorators: {
|
|
9103
|
+
labels: [{
|
|
9104
|
+
type: i0.Input,
|
|
9105
|
+
args: [{
|
|
9106
|
+
isSignal: true,
|
|
9107
|
+
alias: "labels",
|
|
9108
|
+
required: false
|
|
9109
|
+
}]
|
|
9110
|
+
}],
|
|
9111
|
+
series: [{
|
|
9112
|
+
type: i0.Input,
|
|
9113
|
+
args: [{
|
|
9114
|
+
isSignal: true,
|
|
9115
|
+
alias: "series",
|
|
9116
|
+
required: false
|
|
9117
|
+
}]
|
|
9118
|
+
}],
|
|
9119
|
+
orientation: [{
|
|
9120
|
+
type: i0.Input,
|
|
9121
|
+
args: [{
|
|
9122
|
+
isSignal: true,
|
|
9123
|
+
alias: "orientation",
|
|
9124
|
+
required: false
|
|
9125
|
+
}]
|
|
9126
|
+
}],
|
|
9127
|
+
stacked: [{
|
|
9128
|
+
type: i0.Input,
|
|
9129
|
+
args: [{
|
|
9130
|
+
isSignal: true,
|
|
9131
|
+
alias: "stacked",
|
|
9132
|
+
required: false
|
|
9133
|
+
}]
|
|
9134
|
+
}],
|
|
9135
|
+
showGrid: [{
|
|
9136
|
+
type: i0.Input,
|
|
9137
|
+
args: [{
|
|
9138
|
+
isSignal: true,
|
|
9139
|
+
alias: "showGrid",
|
|
9140
|
+
required: false
|
|
9141
|
+
}]
|
|
9142
|
+
}],
|
|
9143
|
+
showLegend: [{
|
|
9144
|
+
type: i0.Input,
|
|
9145
|
+
args: [{
|
|
9146
|
+
isSignal: true,
|
|
9147
|
+
alias: "showLegend",
|
|
9148
|
+
required: false
|
|
9149
|
+
}]
|
|
9150
|
+
}],
|
|
9151
|
+
showValues: [{
|
|
9152
|
+
type: i0.Input,
|
|
9153
|
+
args: [{
|
|
9154
|
+
isSignal: true,
|
|
9155
|
+
alias: "showValues",
|
|
9156
|
+
required: false
|
|
9157
|
+
}]
|
|
9158
|
+
}],
|
|
9159
|
+
height: [{
|
|
9160
|
+
type: i0.Input,
|
|
9161
|
+
args: [{
|
|
9162
|
+
isSignal: true,
|
|
9163
|
+
alias: "height",
|
|
9164
|
+
required: false
|
|
9165
|
+
}]
|
|
9166
|
+
}],
|
|
9167
|
+
size: [{
|
|
9168
|
+
type: i0.Input,
|
|
9169
|
+
args: [{
|
|
9170
|
+
isSignal: true,
|
|
9171
|
+
alias: "size",
|
|
9172
|
+
required: false
|
|
9173
|
+
}]
|
|
9174
|
+
}],
|
|
9175
|
+
animation: [{
|
|
9176
|
+
type: i0.Input,
|
|
9177
|
+
args: [{
|
|
9178
|
+
isSignal: true,
|
|
9179
|
+
alias: "animation",
|
|
9180
|
+
required: false
|
|
9181
|
+
}]
|
|
9182
|
+
}],
|
|
9183
|
+
animationDuration: [{
|
|
9184
|
+
type: i0.Input,
|
|
9185
|
+
args: [{
|
|
9186
|
+
isSignal: true,
|
|
9187
|
+
alias: "animationDuration",
|
|
9188
|
+
required: false
|
|
9189
|
+
}]
|
|
9190
|
+
}],
|
|
9191
|
+
formatValue: [{
|
|
9192
|
+
type: i0.Input,
|
|
9193
|
+
args: [{
|
|
9194
|
+
isSignal: true,
|
|
9195
|
+
alias: "formatValue",
|
|
9196
|
+
required: false
|
|
9197
|
+
}]
|
|
9198
|
+
}],
|
|
9199
|
+
ariaLabel: [{
|
|
9200
|
+
type: i0.Input,
|
|
9201
|
+
args: [{
|
|
9202
|
+
isSignal: true,
|
|
9203
|
+
alias: "aria-label",
|
|
9204
|
+
required: false
|
|
9205
|
+
}]
|
|
9206
|
+
}],
|
|
9207
|
+
pointClick: [{
|
|
9208
|
+
type: i0.Output,
|
|
9209
|
+
args: ["pointClick"]
|
|
9210
|
+
}],
|
|
9211
|
+
activePointChange: [{
|
|
9212
|
+
type: i0.Output,
|
|
9213
|
+
args: ["activePointChange"]
|
|
9214
|
+
}]
|
|
9215
|
+
}
|
|
9216
|
+
});
|
|
8210
9217
|
var ChevronRightIconComponent = class ChevronRightIconComponent extends IconComponentBase {
|
|
8211
9218
|
static slug = "chevron-right";
|
|
8212
9219
|
static category = "feather";
|
|
@@ -9131,7 +10138,8 @@ var CheckboxComponent = class CheckboxComponent {
|
|
|
9131
10138
|
"flip",
|
|
9132
10139
|
"whenClipped",
|
|
9133
10140
|
"maxWidth",
|
|
9134
|
-
"dismissDelay"
|
|
10141
|
+
"dismissDelay",
|
|
10142
|
+
"tooltipOpen"
|
|
9135
10143
|
]
|
|
9136
10144
|
}
|
|
9137
10145
|
],
|
|
@@ -11455,7 +12463,7 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
11455
12463
|
],
|
|
11456
12464
|
ngImport: i0,
|
|
11457
12465
|
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n }\n </button>\n @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"activePresets().has(preset)\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
11458
|
-
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.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{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;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"],
|
|
12466
|
+
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;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"],
|
|
11459
12467
|
dependencies: [
|
|
11460
12468
|
{
|
|
11461
12469
|
kind: "component",
|
|
@@ -11547,7 +12555,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11547
12555
|
multi: true
|
|
11548
12556
|
}],
|
|
11549
12557
|
template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n }\n </button>\n @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"activePresets().has(preset)\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
11550
|
-
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.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{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;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"]
|
|
12558
|
+
styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;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--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;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"]
|
|
11551
12559
|
}]
|
|
11552
12560
|
}],
|
|
11553
12561
|
propDecorators: {
|
|
@@ -18083,6 +19091,647 @@ function roundTo(value, digits) {
|
|
|
18083
19091
|
const factor = 10 ** digits;
|
|
18084
19092
|
return (Math.round(value * factor) / factor).toString();
|
|
18085
19093
|
}
|
|
19094
|
+
function linearPath(points) {
|
|
19095
|
+
return points.map((p, i) => `${i ? "L" : "M"}${p.x},${p.y}`).join("");
|
|
19096
|
+
}
|
|
19097
|
+
function stepPath(points) {
|
|
19098
|
+
let d = `M${points[0].x},${points[0].y}`;
|
|
19099
|
+
for (let i = 1; i < points.length; i++) {
|
|
19100
|
+
const mid = (points[i - 1].x + points[i].x) / 2;
|
|
19101
|
+
d += `H${mid}V${points[i].y}H${points[i].x}`;
|
|
19102
|
+
}
|
|
19103
|
+
return d;
|
|
19104
|
+
}
|
|
19105
|
+
function smoothPath(points) {
|
|
19106
|
+
const n = points.length;
|
|
19107
|
+
if (n < 3) return linearPath(points);
|
|
19108
|
+
const slopes = [];
|
|
19109
|
+
for (let i = 0; i < n - 1; i++) slopes.push((points[i + 1].y - points[i].y) / (points[i + 1].x - points[i].x));
|
|
19110
|
+
const tangents = [slopes[0]];
|
|
19111
|
+
for (let i = 1; i < n - 1; i++) tangents.push(slopes[i - 1] * slopes[i] <= 0 ? 0 : (slopes[i - 1] + slopes[i]) / 2);
|
|
19112
|
+
tangents.push(slopes[n - 2]);
|
|
19113
|
+
for (let i = 0; i < n - 1; i++) {
|
|
19114
|
+
if (slopes[i] === 0) {
|
|
19115
|
+
tangents[i] = 0;
|
|
19116
|
+
tangents[i + 1] = 0;
|
|
19117
|
+
continue;
|
|
19118
|
+
}
|
|
19119
|
+
const a = tangents[i] / slopes[i];
|
|
19120
|
+
const b = tangents[i + 1] / slopes[i];
|
|
19121
|
+
const s = a * a + b * b;
|
|
19122
|
+
if (s > 9) {
|
|
19123
|
+
const k = 3 / Math.sqrt(s);
|
|
19124
|
+
tangents[i] = k * a * slopes[i];
|
|
19125
|
+
tangents[i + 1] = k * b * slopes[i];
|
|
19126
|
+
}
|
|
19127
|
+
}
|
|
19128
|
+
let d = `M${points[0].x},${points[0].y}`;
|
|
19129
|
+
for (let i = 0; i < n - 1; i++) {
|
|
19130
|
+
const p = points[i];
|
|
19131
|
+
const q = points[i + 1];
|
|
19132
|
+
const third = (q.x - p.x) / 3;
|
|
19133
|
+
d += `C${p.x + third},${p.y + tangents[i] * third},${q.x - third},${q.y - tangents[i + 1] * third},${q.x},${q.y}`;
|
|
19134
|
+
}
|
|
19135
|
+
return d;
|
|
19136
|
+
}
|
|
19137
|
+
const CURVES = {
|
|
19138
|
+
linear: linearPath,
|
|
19139
|
+
smooth: smoothPath,
|
|
19140
|
+
step: stepPath
|
|
19141
|
+
};
|
|
19142
|
+
var LineChartComponent = class LineChartComponent {
|
|
19143
|
+
i18n = inject(EagamiI18nService);
|
|
19144
|
+
labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
|
|
19145
|
+
series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
19146
|
+
curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
|
|
19147
|
+
showArea = input(false, ...ngDevMode ? [{ debugName: "showArea" }] : /* istanbul ignore next */ []);
|
|
19148
|
+
showPoints = input(true, ...ngDevMode ? [{ debugName: "showPoints" }] : /* istanbul ignore next */ []);
|
|
19149
|
+
showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
|
|
19150
|
+
showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
|
|
19151
|
+
yMin = input(void 0, ...ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []);
|
|
19152
|
+
yMax = input(void 0, ...ngDevMode ? [{ debugName: "yMax" }] : /* istanbul ignore next */ []);
|
|
19153
|
+
height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
19154
|
+
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
19155
|
+
animation = input("draw", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
|
|
19156
|
+
animationDuration = input(600, ...ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []);
|
|
19157
|
+
formatValue = input(null, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
|
|
19158
|
+
ariaLabel = input(void 0, {
|
|
19159
|
+
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
19160
|
+
alias: "aria-label"
|
|
19161
|
+
});
|
|
19162
|
+
pointClick = output();
|
|
19163
|
+
activePointChange = output();
|
|
19164
|
+
viewport = injectChartViewport(this.size);
|
|
19165
|
+
format = injectChartFormatter(this.formatValue);
|
|
19166
|
+
active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
|
|
19167
|
+
label = computed(() => this.ariaLabel() || this.i18n.messages().chart.lineChart, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
19168
|
+
count = computed(() => Math.max(this.labels().length, ...this.series().map((s) => s.data.length), 0), ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
|
|
19169
|
+
hasData = computed(() => this.series().some((s) => s.data.some((v) => v != null && isFinite(v))), ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
|
|
19170
|
+
renderPass = computed(() => {
|
|
19171
|
+
this.labels();
|
|
19172
|
+
this.series();
|
|
19173
|
+
this.animation();
|
|
19174
|
+
this.animationDuration();
|
|
19175
|
+
return [{}];
|
|
19176
|
+
}, ...ngDevMode ? [{ debugName: "renderPass" }] : /* istanbul ignore next */ []);
|
|
19177
|
+
hostClasses = computed(() => ({
|
|
19178
|
+
[`ea-line-chart--${this.size()}`]: true,
|
|
19179
|
+
[`ea-line-chart--animate-${this.animation()}`]: true
|
|
19180
|
+
}), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
|
|
19181
|
+
layout = computed(() => {
|
|
19182
|
+
const count = this.count();
|
|
19183
|
+
const width = this.viewport.width();
|
|
19184
|
+
const height = this.height();
|
|
19185
|
+
const axisPx = this.viewport.fontSize() * .75;
|
|
19186
|
+
const format = this.format();
|
|
19187
|
+
const values = this.series().flatMap((s) => s.data.filter((v) => v != null && isFinite(v)));
|
|
19188
|
+
const top = axisPx;
|
|
19189
|
+
const bottom = axisPx * 2.5;
|
|
19190
|
+
const plotHeight = Math.max(1, height - top - bottom);
|
|
19191
|
+
let lo = this.yMin() ?? Math.min(...values);
|
|
19192
|
+
let hi = this.yMax() ?? Math.max(...values);
|
|
19193
|
+
if (this.showArea() && this.yMin() === void 0) lo = Math.min(lo, 0);
|
|
19194
|
+
if (lo > hi) [lo, hi] = [hi, lo];
|
|
19195
|
+
const scale = niceScale(lo, hi, Math.max(2, Math.floor(plotHeight / (axisPx * 3))));
|
|
19196
|
+
let min = this.yMin() ?? scale.min;
|
|
19197
|
+
let max = this.yMax() ?? scale.max;
|
|
19198
|
+
if (min > max) [min, max] = [max, min];
|
|
19199
|
+
const ticks = scale.ticks.filter((t) => t >= min && t <= max).map((value) => ({
|
|
19200
|
+
value,
|
|
19201
|
+
text: format(value)
|
|
19202
|
+
}));
|
|
19203
|
+
const labelTexts = Array.from({ length: count }, (_, i) => this.labels()[i] ?? "");
|
|
19204
|
+
const widestLabel = Math.max(0, ...labelTexts.map((t) => estimateTextWidth(t, axisPx)));
|
|
19205
|
+
const left = Math.max(0, ...ticks.map((t) => estimateTextWidth(t.text, axisPx))) + axisPx;
|
|
19206
|
+
const right = Math.min(widestLabel / 2, width * .1) + axisPx / 2;
|
|
19207
|
+
const plotWidth = Math.max(1, width - left - right);
|
|
19208
|
+
const spacing = count > 1 ? plotWidth / (count - 1) : plotWidth;
|
|
19209
|
+
const x = (i) => count > 1 ? left + i * spacing : left + plotWidth / 2;
|
|
19210
|
+
const y = (v) => top + (1 - (clamp$1(v, min, max) - min) / (max - min || 1)) * plotHeight;
|
|
19211
|
+
const baselineY = y(clamp$1(0, min, max));
|
|
19212
|
+
const labelStep = Math.max(1, Math.ceil((widestLabel + axisPx) / spacing));
|
|
19213
|
+
const xLabels = labelTexts.map((text, index) => ({
|
|
19214
|
+
text,
|
|
19215
|
+
index,
|
|
19216
|
+
x: x(index)
|
|
19217
|
+
})).filter((l) => l.index % labelStep === 0);
|
|
19218
|
+
const curve = CURVES[this.curve()];
|
|
19219
|
+
const series = this.series().map((s, seriesIndex) => {
|
|
19220
|
+
const segments = [];
|
|
19221
|
+
let run = [];
|
|
19222
|
+
for (let index = 0; index < count; index++) {
|
|
19223
|
+
const value = s.data[index];
|
|
19224
|
+
if (value == null || !isFinite(value)) {
|
|
19225
|
+
if (run.length) segments.push(run);
|
|
19226
|
+
run = [];
|
|
19227
|
+
continue;
|
|
19228
|
+
}
|
|
19229
|
+
run.push({
|
|
19230
|
+
x: x(index),
|
|
19231
|
+
y: y(value),
|
|
19232
|
+
index,
|
|
19233
|
+
value
|
|
19234
|
+
});
|
|
19235
|
+
}
|
|
19236
|
+
if (run.length) segments.push(run);
|
|
19237
|
+
return {
|
|
19238
|
+
name: s.name,
|
|
19239
|
+
color: chartColor(seriesIndex, s.color),
|
|
19240
|
+
paths: segments.map(curve),
|
|
19241
|
+
areas: segments.map((seg) => `${curve(seg)}L${seg[seg.length - 1].x},${baselineY}L${seg[0].x},${baselineY}Z`),
|
|
19242
|
+
points: segments.flat()
|
|
19243
|
+
};
|
|
19244
|
+
});
|
|
19245
|
+
return {
|
|
19246
|
+
width,
|
|
19247
|
+
height,
|
|
19248
|
+
top,
|
|
19249
|
+
left,
|
|
19250
|
+
plotWidth,
|
|
19251
|
+
plotHeight,
|
|
19252
|
+
baselineY,
|
|
19253
|
+
labelY: top + plotHeight + axisPx * 1.5,
|
|
19254
|
+
tickX: left - axisPx / 2,
|
|
19255
|
+
ticks: ticks.map((t) => ({
|
|
19256
|
+
...t,
|
|
19257
|
+
y: y(t.value)
|
|
19258
|
+
})),
|
|
19259
|
+
xLabels,
|
|
19260
|
+
series,
|
|
19261
|
+
x,
|
|
19262
|
+
y
|
|
19263
|
+
};
|
|
19264
|
+
}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
|
|
19265
|
+
tooltip = computed(() => {
|
|
19266
|
+
const active = this.active();
|
|
19267
|
+
if (!active) return null;
|
|
19268
|
+
const layout = this.layout();
|
|
19269
|
+
const x = layout.x(active.index);
|
|
19270
|
+
const activeValue = this.series()[active.series]?.data[active.index];
|
|
19271
|
+
const rows = this.series().map((s, i) => {
|
|
19272
|
+
const value = s.data[active.index];
|
|
19273
|
+
return {
|
|
19274
|
+
name: s.name,
|
|
19275
|
+
color: chartColor(i, s.color),
|
|
19276
|
+
value: value == null || !isFinite(value) ? "–" : this.format()(value),
|
|
19277
|
+
active: i === active.series
|
|
19278
|
+
};
|
|
19279
|
+
});
|
|
19280
|
+
return {
|
|
19281
|
+
x,
|
|
19282
|
+
y: activeValue != null && isFinite(activeValue) ? layout.y(activeValue) : layout.top,
|
|
19283
|
+
title: this.labels()[active.index] ?? "",
|
|
19284
|
+
rows,
|
|
19285
|
+
key: `${active.series}-${active.index}`
|
|
19286
|
+
};
|
|
19287
|
+
}, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
|
|
19288
|
+
tooltips = computed(() => {
|
|
19289
|
+
const tip = this.tooltip();
|
|
19290
|
+
return tip ? [tip] : [];
|
|
19291
|
+
}, ...ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []);
|
|
19292
|
+
announcement = computed(() => {
|
|
19293
|
+
const event = this.eventFor(this.active());
|
|
19294
|
+
return event ? this.i18n.messages().chart.point(event.seriesName, event.label, this.format()(event.value)) : "";
|
|
19295
|
+
}, ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
|
|
19296
|
+
showsLegend = computed(() => this.showLegend() && this.series().length > 1, ...ngDevMode ? [{ debugName: "showsLegend" }] : /* istanbul ignore next */ []);
|
|
19297
|
+
seriesColor(index) {
|
|
19298
|
+
return chartColor(index, this.series()[index]?.color);
|
|
19299
|
+
}
|
|
19300
|
+
isDimmed(index) {
|
|
19301
|
+
const active = this.active();
|
|
19302
|
+
return !!active && active.series !== index && this.series().length > 1;
|
|
19303
|
+
}
|
|
19304
|
+
isActivePoint(seriesIndex, index) {
|
|
19305
|
+
const active = this.active();
|
|
19306
|
+
return !!active && active.series === seriesIndex && active.index === index;
|
|
19307
|
+
}
|
|
19308
|
+
tableValue(value) {
|
|
19309
|
+
return value == null || !isFinite(value) ? "–" : this.format()(value);
|
|
19310
|
+
}
|
|
19311
|
+
onPointerMove(event) {
|
|
19312
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
19313
|
+
const layout = this.layout();
|
|
19314
|
+
const count = this.count();
|
|
19315
|
+
const px = event.clientX - rect.left;
|
|
19316
|
+
const py = event.clientY - rect.top;
|
|
19317
|
+
const index = count > 1 ? clamp$1(Math.round((px - layout.left) / layout.plotWidth * (count - 1)), 0, count - 1) : 0;
|
|
19318
|
+
let series = -1;
|
|
19319
|
+
let nearest = Infinity;
|
|
19320
|
+
this.series().forEach((s, i) => {
|
|
19321
|
+
const value = s.data[index];
|
|
19322
|
+
if (value == null || !isFinite(value)) return;
|
|
19323
|
+
const distance = Math.abs(layout.y(value) - py);
|
|
19324
|
+
if (distance < nearest) {
|
|
19325
|
+
nearest = distance;
|
|
19326
|
+
series = i;
|
|
19327
|
+
}
|
|
19328
|
+
});
|
|
19329
|
+
this.setActive(series === -1 ? null : {
|
|
19330
|
+
series,
|
|
19331
|
+
index
|
|
19332
|
+
});
|
|
19333
|
+
}
|
|
19334
|
+
onPointerLeave() {
|
|
19335
|
+
this.setActive(null);
|
|
19336
|
+
}
|
|
19337
|
+
onClick() {
|
|
19338
|
+
const event = this.eventFor(this.active());
|
|
19339
|
+
if (event) this.pointClick.emit(event);
|
|
19340
|
+
}
|
|
19341
|
+
onFocus() {
|
|
19342
|
+
if (!this.active()) this.setActive(this.firstPoint());
|
|
19343
|
+
}
|
|
19344
|
+
onBlur() {
|
|
19345
|
+
this.setActive(null);
|
|
19346
|
+
}
|
|
19347
|
+
onKeydown(event) {
|
|
19348
|
+
if (!this.active() && event.key.startsWith("Arrow")) {
|
|
19349
|
+
event.preventDefault();
|
|
19350
|
+
this.setActive(this.firstPoint());
|
|
19351
|
+
return;
|
|
19352
|
+
}
|
|
19353
|
+
const active = this.active() ?? this.firstPoint();
|
|
19354
|
+
if (!active) return;
|
|
19355
|
+
const count = this.count();
|
|
19356
|
+
const seriesCount = this.series().length;
|
|
19357
|
+
let next = active;
|
|
19358
|
+
switch (event.key) {
|
|
19359
|
+
case "ArrowRight":
|
|
19360
|
+
next = this.nearestValid(active.series, active.index + 1, 1);
|
|
19361
|
+
break;
|
|
19362
|
+
case "ArrowLeft":
|
|
19363
|
+
next = this.nearestValid(active.series, active.index - 1, -1);
|
|
19364
|
+
break;
|
|
19365
|
+
case "Home":
|
|
19366
|
+
next = this.nearestValid(active.series, 0, 1);
|
|
19367
|
+
break;
|
|
19368
|
+
case "End":
|
|
19369
|
+
next = this.nearestValid(active.series, count - 1, -1);
|
|
19370
|
+
break;
|
|
19371
|
+
case "ArrowUp":
|
|
19372
|
+
case "ArrowDown": {
|
|
19373
|
+
const step = event.key === "ArrowDown" ? 1 : -1;
|
|
19374
|
+
for (let hop = 1; hop < seriesCount; hop++) {
|
|
19375
|
+
const series = (active.series + step * hop + seriesCount) % seriesCount;
|
|
19376
|
+
if (this.valueAt(series, active.index) != null) {
|
|
19377
|
+
next = {
|
|
19378
|
+
series,
|
|
19379
|
+
index: active.index
|
|
19380
|
+
};
|
|
19381
|
+
break;
|
|
19382
|
+
}
|
|
19383
|
+
}
|
|
19384
|
+
break;
|
|
19385
|
+
}
|
|
19386
|
+
case "Enter":
|
|
19387
|
+
case " ":
|
|
19388
|
+
this.onClick();
|
|
19389
|
+
break;
|
|
19390
|
+
case "Escape":
|
|
19391
|
+
next = null;
|
|
19392
|
+
break;
|
|
19393
|
+
default: return;
|
|
19394
|
+
}
|
|
19395
|
+
event.preventDefault();
|
|
19396
|
+
this.setActive(next ?? (event.key === "Escape" ? null : active));
|
|
19397
|
+
}
|
|
19398
|
+
valueAt(series, index) {
|
|
19399
|
+
const value = this.series()[series]?.data[index];
|
|
19400
|
+
return value == null || !isFinite(value) ? null : value;
|
|
19401
|
+
}
|
|
19402
|
+
firstPoint() {
|
|
19403
|
+
for (let index = 0; index < this.count(); index++) {
|
|
19404
|
+
const series = this.series().findIndex((_, s) => this.valueAt(s, index) != null);
|
|
19405
|
+
if (series !== -1) return {
|
|
19406
|
+
series,
|
|
19407
|
+
index
|
|
19408
|
+
};
|
|
19409
|
+
}
|
|
19410
|
+
return null;
|
|
19411
|
+
}
|
|
19412
|
+
nearestValid(series, index, step) {
|
|
19413
|
+
for (let i = index; i >= 0 && i < this.count(); i += step) if (this.valueAt(series, i) != null) return {
|
|
19414
|
+
series,
|
|
19415
|
+
index: i
|
|
19416
|
+
};
|
|
19417
|
+
return null;
|
|
19418
|
+
}
|
|
19419
|
+
eventFor(active) {
|
|
19420
|
+
if (!active) return null;
|
|
19421
|
+
const value = this.valueAt(active.series, active.index);
|
|
19422
|
+
if (value == null) return null;
|
|
19423
|
+
return {
|
|
19424
|
+
seriesIndex: active.series,
|
|
19425
|
+
seriesName: this.series()[active.series].name,
|
|
19426
|
+
index: active.index,
|
|
19427
|
+
label: this.labels()[active.index] ?? "",
|
|
19428
|
+
value
|
|
19429
|
+
};
|
|
19430
|
+
}
|
|
19431
|
+
setActive(next) {
|
|
19432
|
+
const current = this.active();
|
|
19433
|
+
if (current?.series === next?.series && current?.index === next?.index) return;
|
|
19434
|
+
this.active.set(next);
|
|
19435
|
+
this.activePointChange.emit(this.eventFor(next));
|
|
19436
|
+
}
|
|
19437
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
19438
|
+
minVersion: "12.0.0",
|
|
19439
|
+
version: "22.2.0",
|
|
19440
|
+
ngImport: i0,
|
|
19441
|
+
type: LineChartComponent,
|
|
19442
|
+
deps: [],
|
|
19443
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
19444
|
+
});
|
|
19445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
19446
|
+
minVersion: "17.0.0",
|
|
19447
|
+
version: "22.2.0",
|
|
19448
|
+
type: LineChartComponent,
|
|
19449
|
+
isStandalone: true,
|
|
19450
|
+
selector: "ea-line-chart",
|
|
19451
|
+
inputs: {
|
|
19452
|
+
labels: {
|
|
19453
|
+
classPropertyName: "labels",
|
|
19454
|
+
publicName: "labels",
|
|
19455
|
+
isSignal: true,
|
|
19456
|
+
isRequired: false,
|
|
19457
|
+
transformFunction: null
|
|
19458
|
+
},
|
|
19459
|
+
series: {
|
|
19460
|
+
classPropertyName: "series",
|
|
19461
|
+
publicName: "series",
|
|
19462
|
+
isSignal: true,
|
|
19463
|
+
isRequired: false,
|
|
19464
|
+
transformFunction: null
|
|
19465
|
+
},
|
|
19466
|
+
curve: {
|
|
19467
|
+
classPropertyName: "curve",
|
|
19468
|
+
publicName: "curve",
|
|
19469
|
+
isSignal: true,
|
|
19470
|
+
isRequired: false,
|
|
19471
|
+
transformFunction: null
|
|
19472
|
+
},
|
|
19473
|
+
showArea: {
|
|
19474
|
+
classPropertyName: "showArea",
|
|
19475
|
+
publicName: "showArea",
|
|
19476
|
+
isSignal: true,
|
|
19477
|
+
isRequired: false,
|
|
19478
|
+
transformFunction: null
|
|
19479
|
+
},
|
|
19480
|
+
showPoints: {
|
|
19481
|
+
classPropertyName: "showPoints",
|
|
19482
|
+
publicName: "showPoints",
|
|
19483
|
+
isSignal: true,
|
|
19484
|
+
isRequired: false,
|
|
19485
|
+
transformFunction: null
|
|
19486
|
+
},
|
|
19487
|
+
showGrid: {
|
|
19488
|
+
classPropertyName: "showGrid",
|
|
19489
|
+
publicName: "showGrid",
|
|
19490
|
+
isSignal: true,
|
|
19491
|
+
isRequired: false,
|
|
19492
|
+
transformFunction: null
|
|
19493
|
+
},
|
|
19494
|
+
showLegend: {
|
|
19495
|
+
classPropertyName: "showLegend",
|
|
19496
|
+
publicName: "showLegend",
|
|
19497
|
+
isSignal: true,
|
|
19498
|
+
isRequired: false,
|
|
19499
|
+
transformFunction: null
|
|
19500
|
+
},
|
|
19501
|
+
yMin: {
|
|
19502
|
+
classPropertyName: "yMin",
|
|
19503
|
+
publicName: "yMin",
|
|
19504
|
+
isSignal: true,
|
|
19505
|
+
isRequired: false,
|
|
19506
|
+
transformFunction: null
|
|
19507
|
+
},
|
|
19508
|
+
yMax: {
|
|
19509
|
+
classPropertyName: "yMax",
|
|
19510
|
+
publicName: "yMax",
|
|
19511
|
+
isSignal: true,
|
|
19512
|
+
isRequired: false,
|
|
19513
|
+
transformFunction: null
|
|
19514
|
+
},
|
|
19515
|
+
height: {
|
|
19516
|
+
classPropertyName: "height",
|
|
19517
|
+
publicName: "height",
|
|
19518
|
+
isSignal: true,
|
|
19519
|
+
isRequired: false,
|
|
19520
|
+
transformFunction: null
|
|
19521
|
+
},
|
|
19522
|
+
size: {
|
|
19523
|
+
classPropertyName: "size",
|
|
19524
|
+
publicName: "size",
|
|
19525
|
+
isSignal: true,
|
|
19526
|
+
isRequired: false,
|
|
19527
|
+
transformFunction: null
|
|
19528
|
+
},
|
|
19529
|
+
animation: {
|
|
19530
|
+
classPropertyName: "animation",
|
|
19531
|
+
publicName: "animation",
|
|
19532
|
+
isSignal: true,
|
|
19533
|
+
isRequired: false,
|
|
19534
|
+
transformFunction: null
|
|
19535
|
+
},
|
|
19536
|
+
animationDuration: {
|
|
19537
|
+
classPropertyName: "animationDuration",
|
|
19538
|
+
publicName: "animationDuration",
|
|
19539
|
+
isSignal: true,
|
|
19540
|
+
isRequired: false,
|
|
19541
|
+
transformFunction: null
|
|
19542
|
+
},
|
|
19543
|
+
formatValue: {
|
|
19544
|
+
classPropertyName: "formatValue",
|
|
19545
|
+
publicName: "formatValue",
|
|
19546
|
+
isSignal: true,
|
|
19547
|
+
isRequired: false,
|
|
19548
|
+
transformFunction: null
|
|
19549
|
+
},
|
|
19550
|
+
ariaLabel: {
|
|
19551
|
+
classPropertyName: "ariaLabel",
|
|
19552
|
+
publicName: "aria-label",
|
|
19553
|
+
isSignal: true,
|
|
19554
|
+
isRequired: false,
|
|
19555
|
+
transformFunction: null
|
|
19556
|
+
}
|
|
19557
|
+
},
|
|
19558
|
+
outputs: {
|
|
19559
|
+
pointClick: "pointClick",
|
|
19560
|
+
activePointChange: "activePointChange"
|
|
19561
|
+
},
|
|
19562
|
+
ngImport: i0,
|
|
19563
|
+
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-line-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (showGrid()) {\n <line\n class=\"ea-line-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\" />\n }\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().tickX\"\n [attr.y]=\"tick.y\">\n {{ tick.text }}\n </text>\n }\n <line\n class=\"ea-line-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().top + layout().plotHeight\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n @for (xLabel of layout().xLabels; track xLabel.index) {\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n text-anchor=\"middle\"\n [attr.x]=\"xLabel.x\"\n [attr.y]=\"layout().labelY\">\n {{ xLabel.text }}\n </text>\n }\n @if (tooltip(); as tip) {\n <line\n class=\"ea-line-chart__crosshair\"\n [attr.x1]=\"tip.x\"\n [attr.x2]=\"tip.x\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <g class=\"ea-line-chart__lines\">\n @for (line of layout().series; track $index; let s = $index) {\n <g\n class=\"ea-line-chart__series\"\n [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n [style.--ea-chart-color]=\"line.color\">\n @if (showArea()) {\n @for (area of line.areas; track $index) {\n <path\n class=\"ea-line-chart__area\"\n [attr.d]=\"area\" />\n }\n }\n @for (path of line.paths; track $index) {\n <path\n class=\"ea-line-chart__line\"\n pathLength=\"1\"\n [attr.d]=\"path\" />\n }\n @for (point of line.points; track point.index) {\n @if (showPoints() || isActivePoint(s, point.index)) {\n <circle\n class=\"ea-line-chart__point\"\n [class.ea-line-chart__point--active]=\"isActivePoint(s, point.index)\"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n }\n }\n </g>\n }\n </g>\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-line-chart__anchor\"\n width=\"12\"\n height=\"12\"\n [attr.x]=\"tip.x - 6\"\n [attr.y]=\"tip.y - 6\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-line-chart__tooltip\">\n <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-line-chart__tooltip-row\"\n [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-line-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <table class=\"ea-line-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-line-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-line-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-line-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-line-chart__legend-item\">\n <span\n class=\"ea-line-chart__legend-line\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
19564
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{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-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .6);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"],
|
|
19565
|
+
dependencies: [{
|
|
19566
|
+
kind: "directive",
|
|
19567
|
+
type: NgClass,
|
|
19568
|
+
selector: "[ngClass]",
|
|
19569
|
+
inputs: ["class", "ngClass"]
|
|
19570
|
+
}, {
|
|
19571
|
+
kind: "directive",
|
|
19572
|
+
type: TooltipDirective,
|
|
19573
|
+
selector: "[eaTooltip]",
|
|
19574
|
+
inputs: [
|
|
19575
|
+
"eaTooltip",
|
|
19576
|
+
"tooltipPosition",
|
|
19577
|
+
"flip",
|
|
19578
|
+
"whenClipped",
|
|
19579
|
+
"maxWidth",
|
|
19580
|
+
"dismissDelay",
|
|
19581
|
+
"tooltipOpen"
|
|
19582
|
+
]
|
|
19583
|
+
}],
|
|
19584
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
19585
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
19586
|
+
});
|
|
19587
|
+
};
|
|
19588
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
19589
|
+
minVersion: "12.0.0",
|
|
19590
|
+
version: "22.2.0",
|
|
19591
|
+
ngImport: i0,
|
|
19592
|
+
type: LineChartComponent,
|
|
19593
|
+
decorators: [{
|
|
19594
|
+
type: Component,
|
|
19595
|
+
args: [{
|
|
19596
|
+
selector: "ea-line-chart",
|
|
19597
|
+
imports: [NgClass, TooltipDirective],
|
|
19598
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19599
|
+
encapsulation: ViewEncapsulation.None,
|
|
19600
|
+
template: "<div\n class=\"ea-line-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-line-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-line-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().width\"\n [attr.height]=\"layout().height\"\n [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n <rect\n class=\"ea-line-chart__hit\"\n [attr.x]=\"layout().left\"\n [attr.y]=\"layout().top\"\n [attr.width]=\"layout().plotWidth\"\n [attr.height]=\"layout().plotHeight\" />\n @for (tick of layout().ticks; track tick.value) {\n @if (showGrid()) {\n <line\n class=\"ea-line-chart__grid\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\" />\n }\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n [attr.x]=\"layout().tickX\"\n [attr.y]=\"tick.y\">\n {{ tick.text }}\n </text>\n }\n <line\n class=\"ea-line-chart__baseline\"\n [attr.x1]=\"layout().left\"\n [attr.x2]=\"layout().left + layout().plotWidth\"\n [attr.y1]=\"layout().top + layout().plotHeight\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n @for (xLabel of layout().xLabels; track xLabel.index) {\n <text\n class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n text-anchor=\"middle\"\n [attr.x]=\"xLabel.x\"\n [attr.y]=\"layout().labelY\">\n {{ xLabel.text }}\n </text>\n }\n @if (tooltip(); as tip) {\n <line\n class=\"ea-line-chart__crosshair\"\n [attr.x1]=\"tip.x\"\n [attr.x2]=\"tip.x\"\n [attr.y1]=\"layout().top\"\n [attr.y2]=\"layout().top + layout().plotHeight\" />\n }\n <g class=\"ea-line-chart__lines\">\n @for (line of layout().series; track $index; let s = $index) {\n <g\n class=\"ea-line-chart__series\"\n [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n [style.--ea-chart-color]=\"line.color\">\n @if (showArea()) {\n @for (area of line.areas; track $index) {\n <path\n class=\"ea-line-chart__area\"\n [attr.d]=\"area\" />\n }\n }\n @for (path of line.paths; track $index) {\n <path\n class=\"ea-line-chart__line\"\n pathLength=\"1\"\n [attr.d]=\"path\" />\n }\n @for (point of line.points; track point.index) {\n @if (showPoints() || isActivePoint(s, point.index)) {\n <circle\n class=\"ea-line-chart__point\"\n [class.ea-line-chart__point--active]=\"isActivePoint(s, point.index)\"\n [attr.cx]=\"point.x\"\n [attr.cy]=\"point.y\"\n [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n }\n }\n </g>\n }\n </g>\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-line-chart__anchor\"\n width=\"12\"\n height=\"12\"\n [attr.x]=\"tip.x - 6\"\n [attr.y]=\"tip.y - 6\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-line-chart__tooltip\">\n <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n @for (row of tip.rows; track $index) {\n <span\n class=\"ea-line-chart__tooltip-row\"\n [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n <span\n class=\"ea-line-chart__swatch\"\n [style.--ea-chart-color]=\"row.color\">\n </span>\n <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n </span>\n }\n </div>\n }\n </ng-template>\n <table class=\"ea-line-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n @for (s of series(); track $index) {\n <th scope=\"col\">{{ s.name }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of labels(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ row }}</th>\n @for (s of series(); track $index) {\n <td>{{ tableValue(s.data[i]) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-line-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-line-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showsLegend()) {\n <ul\n class=\"ea-line-chart__legend\"\n aria-hidden=\"true\">\n @for (s of series(); track $index; let i = $index) {\n <li class=\"ea-line-chart__legend-item\">\n <span\n class=\"ea-line-chart__legend-line\"\n [style.--ea-chart-color]=\"seriesColor(i)\">\n </span>\n {{ s.name }}\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
19601
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{margin-inline-start:auto;padding-inline-start:.75em;font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{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-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:calc(var(--ea-chart-duration, .6s) * .6);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"]
|
|
19602
|
+
}]
|
|
19603
|
+
}],
|
|
19604
|
+
propDecorators: {
|
|
19605
|
+
labels: [{
|
|
19606
|
+
type: i0.Input,
|
|
19607
|
+
args: [{
|
|
19608
|
+
isSignal: true,
|
|
19609
|
+
alias: "labels",
|
|
19610
|
+
required: false
|
|
19611
|
+
}]
|
|
19612
|
+
}],
|
|
19613
|
+
series: [{
|
|
19614
|
+
type: i0.Input,
|
|
19615
|
+
args: [{
|
|
19616
|
+
isSignal: true,
|
|
19617
|
+
alias: "series",
|
|
19618
|
+
required: false
|
|
19619
|
+
}]
|
|
19620
|
+
}],
|
|
19621
|
+
curve: [{
|
|
19622
|
+
type: i0.Input,
|
|
19623
|
+
args: [{
|
|
19624
|
+
isSignal: true,
|
|
19625
|
+
alias: "curve",
|
|
19626
|
+
required: false
|
|
19627
|
+
}]
|
|
19628
|
+
}],
|
|
19629
|
+
showArea: [{
|
|
19630
|
+
type: i0.Input,
|
|
19631
|
+
args: [{
|
|
19632
|
+
isSignal: true,
|
|
19633
|
+
alias: "showArea",
|
|
19634
|
+
required: false
|
|
19635
|
+
}]
|
|
19636
|
+
}],
|
|
19637
|
+
showPoints: [{
|
|
19638
|
+
type: i0.Input,
|
|
19639
|
+
args: [{
|
|
19640
|
+
isSignal: true,
|
|
19641
|
+
alias: "showPoints",
|
|
19642
|
+
required: false
|
|
19643
|
+
}]
|
|
19644
|
+
}],
|
|
19645
|
+
showGrid: [{
|
|
19646
|
+
type: i0.Input,
|
|
19647
|
+
args: [{
|
|
19648
|
+
isSignal: true,
|
|
19649
|
+
alias: "showGrid",
|
|
19650
|
+
required: false
|
|
19651
|
+
}]
|
|
19652
|
+
}],
|
|
19653
|
+
showLegend: [{
|
|
19654
|
+
type: i0.Input,
|
|
19655
|
+
args: [{
|
|
19656
|
+
isSignal: true,
|
|
19657
|
+
alias: "showLegend",
|
|
19658
|
+
required: false
|
|
19659
|
+
}]
|
|
19660
|
+
}],
|
|
19661
|
+
yMin: [{
|
|
19662
|
+
type: i0.Input,
|
|
19663
|
+
args: [{
|
|
19664
|
+
isSignal: true,
|
|
19665
|
+
alias: "yMin",
|
|
19666
|
+
required: false
|
|
19667
|
+
}]
|
|
19668
|
+
}],
|
|
19669
|
+
yMax: [{
|
|
19670
|
+
type: i0.Input,
|
|
19671
|
+
args: [{
|
|
19672
|
+
isSignal: true,
|
|
19673
|
+
alias: "yMax",
|
|
19674
|
+
required: false
|
|
19675
|
+
}]
|
|
19676
|
+
}],
|
|
19677
|
+
height: [{
|
|
19678
|
+
type: i0.Input,
|
|
19679
|
+
args: [{
|
|
19680
|
+
isSignal: true,
|
|
19681
|
+
alias: "height",
|
|
19682
|
+
required: false
|
|
19683
|
+
}]
|
|
19684
|
+
}],
|
|
19685
|
+
size: [{
|
|
19686
|
+
type: i0.Input,
|
|
19687
|
+
args: [{
|
|
19688
|
+
isSignal: true,
|
|
19689
|
+
alias: "size",
|
|
19690
|
+
required: false
|
|
19691
|
+
}]
|
|
19692
|
+
}],
|
|
19693
|
+
animation: [{
|
|
19694
|
+
type: i0.Input,
|
|
19695
|
+
args: [{
|
|
19696
|
+
isSignal: true,
|
|
19697
|
+
alias: "animation",
|
|
19698
|
+
required: false
|
|
19699
|
+
}]
|
|
19700
|
+
}],
|
|
19701
|
+
animationDuration: [{
|
|
19702
|
+
type: i0.Input,
|
|
19703
|
+
args: [{
|
|
19704
|
+
isSignal: true,
|
|
19705
|
+
alias: "animationDuration",
|
|
19706
|
+
required: false
|
|
19707
|
+
}]
|
|
19708
|
+
}],
|
|
19709
|
+
formatValue: [{
|
|
19710
|
+
type: i0.Input,
|
|
19711
|
+
args: [{
|
|
19712
|
+
isSignal: true,
|
|
19713
|
+
alias: "formatValue",
|
|
19714
|
+
required: false
|
|
19715
|
+
}]
|
|
19716
|
+
}],
|
|
19717
|
+
ariaLabel: [{
|
|
19718
|
+
type: i0.Input,
|
|
19719
|
+
args: [{
|
|
19720
|
+
isSignal: true,
|
|
19721
|
+
alias: "aria-label",
|
|
19722
|
+
required: false
|
|
19723
|
+
}]
|
|
19724
|
+
}],
|
|
19725
|
+
pointClick: [{
|
|
19726
|
+
type: i0.Output,
|
|
19727
|
+
args: ["pointClick"]
|
|
19728
|
+
}],
|
|
19729
|
+
activePointChange: [{
|
|
19730
|
+
type: i0.Output,
|
|
19731
|
+
args: ["activePointChange"]
|
|
19732
|
+
}]
|
|
19733
|
+
}
|
|
19734
|
+
});
|
|
18086
19735
|
var MenuComponent = class MenuComponent {
|
|
18087
19736
|
injector = inject(Injector);
|
|
18088
19737
|
i18n = inject(EagamiI18nService);
|
|
@@ -18749,7 +20398,8 @@ var TagComponent = class TagComponent {
|
|
|
18749
20398
|
"flip",
|
|
18750
20399
|
"whenClipped",
|
|
18751
20400
|
"maxWidth",
|
|
18752
|
-
"dismissDelay"
|
|
20401
|
+
"dismissDelay",
|
|
20402
|
+
"tooltipOpen"
|
|
18753
20403
|
]
|
|
18754
20404
|
},
|
|
18755
20405
|
{
|
|
@@ -19423,7 +21073,7 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
19423
21073
|
],
|
|
19424
21074
|
ngImport: i0,
|
|
19425
21075
|
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"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 [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
19426
|
-
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{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 .
|
|
21076
|
+
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{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:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"],
|
|
19427
21077
|
dependencies: [
|
|
19428
21078
|
{
|
|
19429
21079
|
kind: "component",
|
|
@@ -19541,7 +21191,8 @@ var MultiSelectComponent = class MultiSelectComponent {
|
|
|
19541
21191
|
"flip",
|
|
19542
21192
|
"whenClipped",
|
|
19543
21193
|
"maxWidth",
|
|
19544
|
-
"dismissDelay"
|
|
21194
|
+
"dismissDelay",
|
|
21195
|
+
"tooltipOpen"
|
|
19545
21196
|
]
|
|
19546
21197
|
},
|
|
19547
21198
|
{
|
|
@@ -19582,7 +21233,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
19582
21233
|
multi: true
|
|
19583
21234
|
}],
|
|
19584
21235
|
template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"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 [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
19585
|
-
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{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 .
|
|
21236
|
+
styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;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:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{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:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"]
|
|
19586
21237
|
}]
|
|
19587
21238
|
}],
|
|
19588
21239
|
ctorParameters: () => [],
|
|
@@ -20312,36 +21963,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20312
21963
|
}]
|
|
20313
21964
|
}
|
|
20314
21965
|
});
|
|
20315
|
-
function intlLocalizes(locale) {
|
|
20316
|
-
try {
|
|
20317
|
-
return new Intl.NumberFormat(locale).resolvedOptions().locale.split("-")[0] === locale.split("-")[0];
|
|
20318
|
-
} catch {
|
|
20319
|
-
return false;
|
|
20320
|
-
}
|
|
20321
|
-
}
|
|
20322
|
-
function groupInteger(digits, sep, grouping) {
|
|
20323
|
-
const primary = grouping[0] ?? 3;
|
|
20324
|
-
const secondary = grouping[1] ?? primary;
|
|
20325
|
-
if (digits.length <= primary) return digits;
|
|
20326
|
-
let result = digits.slice(digits.length - primary);
|
|
20327
|
-
let rest = digits.slice(0, digits.length - primary);
|
|
20328
|
-
while (rest.length > 0) {
|
|
20329
|
-
const take = Math.min(secondary, rest.length);
|
|
20330
|
-
result = `${rest.slice(rest.length - take)}${sep}${result}`;
|
|
20331
|
-
rest = rest.slice(0, rest.length - take);
|
|
20332
|
-
}
|
|
20333
|
-
return result;
|
|
20334
|
-
}
|
|
20335
|
-
function formatGroupedNumber(value, locale, format, options) {
|
|
20336
|
-
if (intlLocalizes(locale)) return value.toLocaleString(locale, options);
|
|
20337
|
-
if (!isFinite(value)) return String(value);
|
|
20338
|
-
const magnitude = Math.abs(value).toString();
|
|
20339
|
-
if (magnitude.includes("e") || magnitude.includes("E")) return value.toString();
|
|
20340
|
-
const [intPart, fracPart] = magnitude.split(".");
|
|
20341
|
-
const grouped = groupInteger(intPart, format.group, format.grouping);
|
|
20342
|
-
const body = fracPart != null ? `${grouped}${format.decimal}${fracPart}` : grouped;
|
|
20343
|
-
return value < 0 ? `-${body}` : body;
|
|
20344
|
-
}
|
|
20345
21966
|
const PAGE_SIZE_ALL = -1;
|
|
20346
21967
|
var PaginatorComponent = class PaginatorComponent {
|
|
20347
21968
|
i18n = inject(EagamiI18nService);
|
|
@@ -20705,6 +22326,449 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20705
22326
|
}]
|
|
20706
22327
|
}
|
|
20707
22328
|
});
|
|
22329
|
+
const ACTIVE_OFFSET = 6;
|
|
22330
|
+
const DONUT_RATIO = .6;
|
|
22331
|
+
function polar(cx, cy, r, angle) {
|
|
22332
|
+
return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
|
|
22333
|
+
}
|
|
22334
|
+
function slicePath(cx, cy, outer, inner, start, end) {
|
|
22335
|
+
if (end - start >= Math.PI * 2 - 1e-6) {
|
|
22336
|
+
const ring = (r, sweep) => `M${cx + r},${cy}A${r},${r} 0 1 ${sweep} ${cx - r},${cy}A${r},${r} 0 1 ${sweep} ${cx + r},${cy}Z`;
|
|
22337
|
+
return inner > 0 ? `${ring(outer, 1)}${ring(inner, 0)}` : ring(outer, 1);
|
|
22338
|
+
}
|
|
22339
|
+
const large = end - start > Math.PI ? 1 : 0;
|
|
22340
|
+
const [ox0, oy0] = polar(cx, cy, outer, start);
|
|
22341
|
+
const [ox1, oy1] = polar(cx, cy, outer, end);
|
|
22342
|
+
if (inner <= 0) return `M${cx},${cy}L${ox0},${oy0}A${outer},${outer} 0 ${large} 1 ${ox1},${oy1}Z`;
|
|
22343
|
+
const [ix0, iy0] = polar(cx, cy, inner, start);
|
|
22344
|
+
const [ix1, iy1] = polar(cx, cy, inner, end);
|
|
22345
|
+
return `M${ox0},${oy0}A${outer},${outer} 0 ${large} 1 ${ox1},${oy1}L${ix1},${iy1}A${inner},${inner} 0 ${large} 0 ${ix0},${iy0}Z`;
|
|
22346
|
+
}
|
|
22347
|
+
var PieChartComponent = class PieChartComponent {
|
|
22348
|
+
i18n = inject(EagamiI18nService);
|
|
22349
|
+
data = input([], ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
|
|
22350
|
+
variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
22351
|
+
showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
|
|
22352
|
+
showPercentages = input(true, ...ngDevMode ? [{ debugName: "showPercentages" }] : /* istanbul ignore next */ []);
|
|
22353
|
+
height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
22354
|
+
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
22355
|
+
animation = input("sweep", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
|
|
22356
|
+
animationDuration = input(600, ...ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []);
|
|
22357
|
+
formatValue = input(null, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
|
|
22358
|
+
ariaLabel = input(void 0, {
|
|
22359
|
+
...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
|
|
22360
|
+
alias: "aria-label"
|
|
22361
|
+
});
|
|
22362
|
+
sliceClick = output();
|
|
22363
|
+
activeSliceChange = output();
|
|
22364
|
+
viewport = injectChartViewport(this.size);
|
|
22365
|
+
format = injectChartFormatter(this.formatValue);
|
|
22366
|
+
active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
|
|
22367
|
+
label = computed(() => this.ariaLabel() || this.i18n.messages().chart.pieChart, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
22368
|
+
total = computed(() => this.data().reduce((sum, slice) => sum + this.sliceValue(slice), 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
|
|
22369
|
+
hasData = computed(() => this.total() > 0, ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
|
|
22370
|
+
renderPass = computed(() => {
|
|
22371
|
+
this.data();
|
|
22372
|
+
this.variant();
|
|
22373
|
+
this.animation();
|
|
22374
|
+
this.animationDuration();
|
|
22375
|
+
return [{}];
|
|
22376
|
+
}, ...ngDevMode ? [{ debugName: "renderPass" }] : /* istanbul ignore next */ []);
|
|
22377
|
+
hostClasses = computed(() => ({
|
|
22378
|
+
[`ea-pie-chart--${this.size()}`]: true,
|
|
22379
|
+
[`ea-pie-chart--${this.variant()}`]: true,
|
|
22380
|
+
[`ea-pie-chart--animate-${this.animation()}`]: true
|
|
22381
|
+
}), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
|
|
22382
|
+
layout = computed(() => {
|
|
22383
|
+
const diameter = Math.max(1, Math.min(this.viewport.width(), this.height()));
|
|
22384
|
+
const cx = diameter / 2;
|
|
22385
|
+
const cy = diameter / 2;
|
|
22386
|
+
const outer = Math.max(1, diameter / 2 - ACTIVE_OFFSET);
|
|
22387
|
+
const inner = this.variant() === "donut" ? outer * DONUT_RATIO : 0;
|
|
22388
|
+
const total = this.total();
|
|
22389
|
+
const slices = [];
|
|
22390
|
+
let angle = -Math.PI / 2;
|
|
22391
|
+
this.data().forEach((slice, index) => {
|
|
22392
|
+
const value = this.sliceValue(slice);
|
|
22393
|
+
if (value <= 0 || total <= 0) return;
|
|
22394
|
+
const sweep = value / total * Math.PI * 2;
|
|
22395
|
+
slices.push({
|
|
22396
|
+
index,
|
|
22397
|
+
path: slicePath(cx, cy, outer, inner, angle, angle + sweep),
|
|
22398
|
+
color: chartColor(index, slice.color),
|
|
22399
|
+
midAngle: angle + sweep / 2,
|
|
22400
|
+
start: angle,
|
|
22401
|
+
end: angle + sweep
|
|
22402
|
+
});
|
|
22403
|
+
angle += sweep;
|
|
22404
|
+
});
|
|
22405
|
+
return {
|
|
22406
|
+
diameter,
|
|
22407
|
+
cx,
|
|
22408
|
+
cy,
|
|
22409
|
+
outer,
|
|
22410
|
+
inner,
|
|
22411
|
+
slices
|
|
22412
|
+
};
|
|
22413
|
+
}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
|
|
22414
|
+
legend = computed(() => this.data().map((slice, index) => ({
|
|
22415
|
+
label: slice.label,
|
|
22416
|
+
color: chartColor(index, slice.color),
|
|
22417
|
+
percent: this.formatPercent(this.percentOf(index))
|
|
22418
|
+
})), ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
|
|
22419
|
+
tooltip = computed(() => {
|
|
22420
|
+
const index = this.active();
|
|
22421
|
+
const layout = this.layout();
|
|
22422
|
+
const slice = layout.slices.find((s) => s.index === index);
|
|
22423
|
+
if (index === null || !slice) return null;
|
|
22424
|
+
const reach = layout.inner > 0 ? (layout.outer + layout.inner) / 2 : layout.outer * .6;
|
|
22425
|
+
const [x, y] = polar(layout.cx, layout.cy, reach, slice.midAngle);
|
|
22426
|
+
return {
|
|
22427
|
+
x,
|
|
22428
|
+
y,
|
|
22429
|
+
title: this.data()[index].label,
|
|
22430
|
+
color: slice.color,
|
|
22431
|
+
detail: `${this.format()(this.sliceValue(this.data()[index]))} (${this.formatPercent(this.percentOf(index))})`,
|
|
22432
|
+
key: index
|
|
22433
|
+
};
|
|
22434
|
+
}, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
|
|
22435
|
+
tooltips = computed(() => {
|
|
22436
|
+
const tip = this.tooltip();
|
|
22437
|
+
return tip ? [tip] : [];
|
|
22438
|
+
}, ...ngDevMode ? [{ debugName: "tooltips" }] : /* istanbul ignore next */ []);
|
|
22439
|
+
announcement = computed(() => {
|
|
22440
|
+
const event = this.eventFor(this.active());
|
|
22441
|
+
return event ? this.i18n.messages().chart.slice(event.label, this.format()(event.value), this.formatPercent(event.percent)) : "";
|
|
22442
|
+
}, ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
|
|
22443
|
+
tableValue(slice) {
|
|
22444
|
+
return this.format()(this.sliceValue(slice));
|
|
22445
|
+
}
|
|
22446
|
+
tablePercent(index) {
|
|
22447
|
+
return this.formatPercent(this.percentOf(index));
|
|
22448
|
+
}
|
|
22449
|
+
isDimmed(index) {
|
|
22450
|
+
const active = this.active();
|
|
22451
|
+
return active !== null && active !== index;
|
|
22452
|
+
}
|
|
22453
|
+
offset(slice) {
|
|
22454
|
+
if (this.active() !== slice.index || this.layout().slices.length < 2) return null;
|
|
22455
|
+
const [dx, dy] = polar(0, 0, ACTIVE_OFFSET, slice.midAngle);
|
|
22456
|
+
return `translate(${dx}px, ${dy}px)`;
|
|
22457
|
+
}
|
|
22458
|
+
onPointerMove(event) {
|
|
22459
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
22460
|
+
const layout = this.layout();
|
|
22461
|
+
const dx = event.clientX - rect.left - layout.cx;
|
|
22462
|
+
const dy = event.clientY - rect.top - layout.cy;
|
|
22463
|
+
const distance = Math.hypot(dx, dy);
|
|
22464
|
+
if (distance < layout.inner || distance > layout.outer + ACTIVE_OFFSET) {
|
|
22465
|
+
this.setActive(null);
|
|
22466
|
+
return;
|
|
22467
|
+
}
|
|
22468
|
+
let angle = Math.atan2(dy, dx);
|
|
22469
|
+
if (angle < -Math.PI / 2) angle += Math.PI * 2;
|
|
22470
|
+
const slice = layout.slices.find((s) => angle >= s.start && angle < s.end);
|
|
22471
|
+
this.setActive(slice ? slice.index : null);
|
|
22472
|
+
}
|
|
22473
|
+
onPointerLeave() {
|
|
22474
|
+
this.setActive(null);
|
|
22475
|
+
}
|
|
22476
|
+
onClick() {
|
|
22477
|
+
const event = this.eventFor(this.active());
|
|
22478
|
+
if (event) this.sliceClick.emit(event);
|
|
22479
|
+
}
|
|
22480
|
+
onFocus() {
|
|
22481
|
+
if (this.active() === null) this.setActive(this.layout().slices[0]?.index ?? null);
|
|
22482
|
+
}
|
|
22483
|
+
onBlur() {
|
|
22484
|
+
this.setActive(null);
|
|
22485
|
+
}
|
|
22486
|
+
onKeydown(event) {
|
|
22487
|
+
const slices = this.layout().slices;
|
|
22488
|
+
if (!slices.length) return;
|
|
22489
|
+
if (this.active() === null && event.key.startsWith("Arrow")) {
|
|
22490
|
+
event.preventDefault();
|
|
22491
|
+
this.setActive(slices[0].index);
|
|
22492
|
+
return;
|
|
22493
|
+
}
|
|
22494
|
+
const position = Math.max(0, slices.findIndex((s) => s.index === this.active()));
|
|
22495
|
+
let next = slices[position].index;
|
|
22496
|
+
switch (event.key) {
|
|
22497
|
+
case "ArrowRight":
|
|
22498
|
+
case "ArrowDown":
|
|
22499
|
+
next = slices[(position + 1) % slices.length].index;
|
|
22500
|
+
break;
|
|
22501
|
+
case "ArrowLeft":
|
|
22502
|
+
case "ArrowUp":
|
|
22503
|
+
next = slices[(position - 1 + slices.length) % slices.length].index;
|
|
22504
|
+
break;
|
|
22505
|
+
case "Home":
|
|
22506
|
+
next = slices[0].index;
|
|
22507
|
+
break;
|
|
22508
|
+
case "End":
|
|
22509
|
+
next = slices[slices.length - 1].index;
|
|
22510
|
+
break;
|
|
22511
|
+
case "Enter":
|
|
22512
|
+
case " ":
|
|
22513
|
+
this.onClick();
|
|
22514
|
+
break;
|
|
22515
|
+
case "Escape":
|
|
22516
|
+
next = null;
|
|
22517
|
+
break;
|
|
22518
|
+
default: return;
|
|
22519
|
+
}
|
|
22520
|
+
event.preventDefault();
|
|
22521
|
+
this.setActive(next);
|
|
22522
|
+
}
|
|
22523
|
+
sliceValue(slice) {
|
|
22524
|
+
return isFinite(slice.value) ? Math.max(0, slice.value) : 0;
|
|
22525
|
+
}
|
|
22526
|
+
percentOf(index) {
|
|
22527
|
+
const total = this.total();
|
|
22528
|
+
const slice = this.data()[index];
|
|
22529
|
+
return total > 0 && slice ? this.sliceValue(slice) / total * 100 : 0;
|
|
22530
|
+
}
|
|
22531
|
+
formatPercent(percent) {
|
|
22532
|
+
return `${formatGroupedNumber(percent, this.i18n.locale(), this.i18n.messages().numberFormat, { maximumFractionDigits: 1 })}%`;
|
|
22533
|
+
}
|
|
22534
|
+
eventFor(index) {
|
|
22535
|
+
const slice = index === null ? void 0 : this.data()[index];
|
|
22536
|
+
if (index === null || !slice) return null;
|
|
22537
|
+
return {
|
|
22538
|
+
index,
|
|
22539
|
+
label: slice.label,
|
|
22540
|
+
value: this.sliceValue(slice),
|
|
22541
|
+
percent: this.percentOf(index)
|
|
22542
|
+
};
|
|
22543
|
+
}
|
|
22544
|
+
setActive(next) {
|
|
22545
|
+
if (this.active() === next) return;
|
|
22546
|
+
this.active.set(next);
|
|
22547
|
+
this.activeSliceChange.emit(this.eventFor(next));
|
|
22548
|
+
}
|
|
22549
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
22550
|
+
minVersion: "12.0.0",
|
|
22551
|
+
version: "22.2.0",
|
|
22552
|
+
ngImport: i0,
|
|
22553
|
+
type: PieChartComponent,
|
|
22554
|
+
deps: [],
|
|
22555
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
22556
|
+
});
|
|
22557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
22558
|
+
minVersion: "17.0.0",
|
|
22559
|
+
version: "22.2.0",
|
|
22560
|
+
type: PieChartComponent,
|
|
22561
|
+
isStandalone: true,
|
|
22562
|
+
selector: "ea-pie-chart",
|
|
22563
|
+
inputs: {
|
|
22564
|
+
data: {
|
|
22565
|
+
classPropertyName: "data",
|
|
22566
|
+
publicName: "data",
|
|
22567
|
+
isSignal: true,
|
|
22568
|
+
isRequired: false,
|
|
22569
|
+
transformFunction: null
|
|
22570
|
+
},
|
|
22571
|
+
variant: {
|
|
22572
|
+
classPropertyName: "variant",
|
|
22573
|
+
publicName: "variant",
|
|
22574
|
+
isSignal: true,
|
|
22575
|
+
isRequired: false,
|
|
22576
|
+
transformFunction: null
|
|
22577
|
+
},
|
|
22578
|
+
showLegend: {
|
|
22579
|
+
classPropertyName: "showLegend",
|
|
22580
|
+
publicName: "showLegend",
|
|
22581
|
+
isSignal: true,
|
|
22582
|
+
isRequired: false,
|
|
22583
|
+
transformFunction: null
|
|
22584
|
+
},
|
|
22585
|
+
showPercentages: {
|
|
22586
|
+
classPropertyName: "showPercentages",
|
|
22587
|
+
publicName: "showPercentages",
|
|
22588
|
+
isSignal: true,
|
|
22589
|
+
isRequired: false,
|
|
22590
|
+
transformFunction: null
|
|
22591
|
+
},
|
|
22592
|
+
height: {
|
|
22593
|
+
classPropertyName: "height",
|
|
22594
|
+
publicName: "height",
|
|
22595
|
+
isSignal: true,
|
|
22596
|
+
isRequired: false,
|
|
22597
|
+
transformFunction: null
|
|
22598
|
+
},
|
|
22599
|
+
size: {
|
|
22600
|
+
classPropertyName: "size",
|
|
22601
|
+
publicName: "size",
|
|
22602
|
+
isSignal: true,
|
|
22603
|
+
isRequired: false,
|
|
22604
|
+
transformFunction: null
|
|
22605
|
+
},
|
|
22606
|
+
animation: {
|
|
22607
|
+
classPropertyName: "animation",
|
|
22608
|
+
publicName: "animation",
|
|
22609
|
+
isSignal: true,
|
|
22610
|
+
isRequired: false,
|
|
22611
|
+
transformFunction: null
|
|
22612
|
+
},
|
|
22613
|
+
animationDuration: {
|
|
22614
|
+
classPropertyName: "animationDuration",
|
|
22615
|
+
publicName: "animationDuration",
|
|
22616
|
+
isSignal: true,
|
|
22617
|
+
isRequired: false,
|
|
22618
|
+
transformFunction: null
|
|
22619
|
+
},
|
|
22620
|
+
formatValue: {
|
|
22621
|
+
classPropertyName: "formatValue",
|
|
22622
|
+
publicName: "formatValue",
|
|
22623
|
+
isSignal: true,
|
|
22624
|
+
isRequired: false,
|
|
22625
|
+
transformFunction: null
|
|
22626
|
+
},
|
|
22627
|
+
ariaLabel: {
|
|
22628
|
+
classPropertyName: "ariaLabel",
|
|
22629
|
+
publicName: "aria-label",
|
|
22630
|
+
isSignal: true,
|
|
22631
|
+
isRequired: false,
|
|
22632
|
+
transformFunction: null
|
|
22633
|
+
}
|
|
22634
|
+
},
|
|
22635
|
+
outputs: {
|
|
22636
|
+
sliceClick: "sliceClick",
|
|
22637
|
+
activeSliceChange: "activeSliceChange"
|
|
22638
|
+
},
|
|
22639
|
+
ngImport: i0,
|
|
22640
|
+
template: "<div\n class=\"ea-pie-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-pie-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n <div class=\"ea-pie-chart__figure\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-pie-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().diameter\"\n [attr.height]=\"layout().diameter\"\n [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n @for (slice of layout().slices; track slice.index) {\n <path\n class=\"ea-pie-chart__slice\"\n fill-rule=\"evenodd\"\n [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n [style.--ea-chart-color]=\"slice.color\"\n [style.transform]=\"offset(slice)\"\n [attr.d]=\"slice.path\" />\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-pie-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-pie-chart__tooltip\">\n <span class=\"ea-pie-chart__tooltip-row\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"tip.color\">\n </span>\n <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n </span>\n <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n </div>\n }\n </ng-template>\n </div>\n <table class=\"ea-pie-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n </tr>\n </thead>\n <tbody>\n @for (slice of data(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ slice.label }}</th>\n <td>{{ tableValue(slice) }}</td>\n <td>{{ tablePercent(i) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-pie-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-pie-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showLegend() && hasData()) {\n <ul\n class=\"ea-pie-chart__legend\"\n aria-hidden=\"true\">\n @for (item of legend(); track $index) {\n <li class=\"ea-pie-chart__legend-item\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"item.color\">\n </span>\n {{ item.label }}\n @if (showPercentages()) {\n <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n }\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
22641
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{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-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"],
|
|
22642
|
+
dependencies: [{
|
|
22643
|
+
kind: "directive",
|
|
22644
|
+
type: NgClass,
|
|
22645
|
+
selector: "[ngClass]",
|
|
22646
|
+
inputs: ["class", "ngClass"]
|
|
22647
|
+
}, {
|
|
22648
|
+
kind: "directive",
|
|
22649
|
+
type: TooltipDirective,
|
|
22650
|
+
selector: "[eaTooltip]",
|
|
22651
|
+
inputs: [
|
|
22652
|
+
"eaTooltip",
|
|
22653
|
+
"tooltipPosition",
|
|
22654
|
+
"flip",
|
|
22655
|
+
"whenClipped",
|
|
22656
|
+
"maxWidth",
|
|
22657
|
+
"dismissDelay",
|
|
22658
|
+
"tooltipOpen"
|
|
22659
|
+
]
|
|
22660
|
+
}],
|
|
22661
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
22662
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
22663
|
+
});
|
|
22664
|
+
};
|
|
22665
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
22666
|
+
minVersion: "12.0.0",
|
|
22667
|
+
version: "22.2.0",
|
|
22668
|
+
ngImport: i0,
|
|
22669
|
+
type: PieChartComponent,
|
|
22670
|
+
decorators: [{
|
|
22671
|
+
type: Component,
|
|
22672
|
+
args: [{
|
|
22673
|
+
selector: "ea-pie-chart",
|
|
22674
|
+
imports: [NgClass, TooltipDirective],
|
|
22675
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
22676
|
+
encapsulation: ViewEncapsulation.None,
|
|
22677
|
+
template: "<div\n class=\"ea-pie-chart\"\n [ngClass]=\"hostClasses()\"\n [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n @if (hasData()) {\n <div\n class=\"ea-pie-chart__plot\"\n role=\"group\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\">\n <div class=\"ea-pie-chart__figure\">\n @for (pass of renderPass(); track pass) {\n <svg\n class=\"ea-pie-chart__svg\"\n aria-hidden=\"true\"\n [attr.width]=\"layout().diameter\"\n [attr.height]=\"layout().diameter\"\n [attr.viewBox]=\"'0 0 ' + layout().diameter + ' ' + layout().diameter\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerdown)=\"onPointerMove($event)\"\n (pointerleave)=\"onPointerLeave()\"\n (click)=\"onClick()\">\n @for (slice of layout().slices; track slice.index) {\n <path\n class=\"ea-pie-chart__slice\"\n fill-rule=\"evenodd\"\n [class.ea-pie-chart__slice--dimmed]=\"isDimmed(slice.index)\"\n [style.--ea-chart-color]=\"slice.color\"\n [style.transform]=\"offset(slice)\"\n [attr.d]=\"slice.path\" />\n }\n @for (tip of tooltips(); track tip.key) {\n <rect\n class=\"ea-pie-chart__anchor\"\n width=\"2\"\n height=\"2\"\n [attr.x]=\"tip.x - 1\"\n [attr.y]=\"tip.y - 1\"\n [eaTooltip]=\"tooltipContent\"\n [tooltipOpen]=\"true\"\n [maxWidth]=\"undefined\" />\n }\n </svg>\n }\n <ng-template #tooltipContent>\n @if (tooltip(); as tip) {\n <div class=\"ea-pie-chart__tooltip\">\n <span class=\"ea-pie-chart__tooltip-row\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"tip.color\">\n </span>\n <span class=\"ea-pie-chart__tooltip-title\">{{ tip.title }}</span>\n </span>\n <span class=\"ea-pie-chart__tooltip-value\">{{ tip.detail }}</span>\n </div>\n }\n </ng-template>\n </div>\n <table class=\"ea-pie-chart__table\">\n <caption>\n {{ label() }}\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.value }}</th>\n <th scope=\"col\">{{ i18n.messages().chart.share }}</th>\n </tr>\n </thead>\n <tbody>\n @for (slice of data(); track $index; let i = $index) {\n <tr>\n <th scope=\"row\">{{ slice.label }}</th>\n <td>{{ tableValue(slice) }}</td>\n <td>{{ tablePercent(i) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <div\n class=\"ea-pie-chart__live\"\n aria-live=\"polite\">\n {{ announcement() }}\n </div>\n } @else {\n <div\n class=\"ea-pie-chart__empty\"\n role=\"img\"\n [attr.aria-label]=\"label()\"\n [style.height.px]=\"height()\">\n {{ i18n.messages().chart.noData }}\n </div>\n }\n @if (showLegend() && hasData()) {\n <ul\n class=\"ea-pie-chart__legend\"\n aria-hidden=\"true\">\n @for (item of legend(); track $index) {\n <li class=\"ea-pie-chart__legend-item\">\n <span\n class=\"ea-pie-chart__swatch\"\n [style.--ea-chart-color]=\"item.color\">\n </span>\n {{ item.label }}\n @if (showPercentages()) {\n <span class=\"ea-pie-chart__legend-percent\">{{ item.percent }}</span>\n }\n </li>\n }\n </ul>\n }\n</div>\n",
|
|
22678
|
+
styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}@property --ea-pie-chart-sweep{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}ea-pie-chart{display:block}.ea-pie-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-pie-chart--2xs{font-size:var(--font-size-2xs)}.ea-pie-chart--xs{font-size:var(--font-size-xs)}.ea-pie-chart--sm{font-size:var(--font-size-sm)}.ea-pie-chart--md{font-size:var(--font-size-md)}.ea-pie-chart--lg{font-size:var(--font-size-lg)}.ea-pie-chart--xl{font-size:var(--font-size-xl)}.ea-pie-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-pie-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-pie-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-pie-chart__plot svg{display:block;overflow:visible}.ea-pie-chart__plot{display:flex;justify-content:center}.ea-pie-chart__figure{position:relative}.ea-pie-chart__svg{display:block;touch-action:pan-y}.ea-pie-chart__slice{stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px;stroke-linejoin:round;fill:var(--ea-chart-color);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-pie-chart__slice--dimmed{opacity:.35}.ea-pie-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-pie-chart__anchor{fill:transparent}.ea-pie-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-pie-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-pie-chart__tooltip-value{font-variant-numeric:tabular-nums}.ea-pie-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-pie-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-pie-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-pie-chart__legend-percent{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.ea-pie-chart__table,.ea-pie-chart__live{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-pie-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-pie-chart--animate-sweep .ea-pie-chart__svg{-webkit-mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);mask-image:conic-gradient(currentColor var(--ea-pie-chart-sweep),transparent 0);animation-name:ea-pie-chart-sweep;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-sweep .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation-name:ea-chart-grow;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-grow .ea-pie-chart__svg{animation:none}}.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-pie-chart--animate-fade .ea-pie-chart__svg{animation:none}}@keyframes ea-pie-chart-sweep{0%{--ea-pie-chart-sweep: 0deg}}\n"]
|
|
22679
|
+
}]
|
|
22680
|
+
}],
|
|
22681
|
+
propDecorators: {
|
|
22682
|
+
data: [{
|
|
22683
|
+
type: i0.Input,
|
|
22684
|
+
args: [{
|
|
22685
|
+
isSignal: true,
|
|
22686
|
+
alias: "data",
|
|
22687
|
+
required: false
|
|
22688
|
+
}]
|
|
22689
|
+
}],
|
|
22690
|
+
variant: [{
|
|
22691
|
+
type: i0.Input,
|
|
22692
|
+
args: [{
|
|
22693
|
+
isSignal: true,
|
|
22694
|
+
alias: "variant",
|
|
22695
|
+
required: false
|
|
22696
|
+
}]
|
|
22697
|
+
}],
|
|
22698
|
+
showLegend: [{
|
|
22699
|
+
type: i0.Input,
|
|
22700
|
+
args: [{
|
|
22701
|
+
isSignal: true,
|
|
22702
|
+
alias: "showLegend",
|
|
22703
|
+
required: false
|
|
22704
|
+
}]
|
|
22705
|
+
}],
|
|
22706
|
+
showPercentages: [{
|
|
22707
|
+
type: i0.Input,
|
|
22708
|
+
args: [{
|
|
22709
|
+
isSignal: true,
|
|
22710
|
+
alias: "showPercentages",
|
|
22711
|
+
required: false
|
|
22712
|
+
}]
|
|
22713
|
+
}],
|
|
22714
|
+
height: [{
|
|
22715
|
+
type: i0.Input,
|
|
22716
|
+
args: [{
|
|
22717
|
+
isSignal: true,
|
|
22718
|
+
alias: "height",
|
|
22719
|
+
required: false
|
|
22720
|
+
}]
|
|
22721
|
+
}],
|
|
22722
|
+
size: [{
|
|
22723
|
+
type: i0.Input,
|
|
22724
|
+
args: [{
|
|
22725
|
+
isSignal: true,
|
|
22726
|
+
alias: "size",
|
|
22727
|
+
required: false
|
|
22728
|
+
}]
|
|
22729
|
+
}],
|
|
22730
|
+
animation: [{
|
|
22731
|
+
type: i0.Input,
|
|
22732
|
+
args: [{
|
|
22733
|
+
isSignal: true,
|
|
22734
|
+
alias: "animation",
|
|
22735
|
+
required: false
|
|
22736
|
+
}]
|
|
22737
|
+
}],
|
|
22738
|
+
animationDuration: [{
|
|
22739
|
+
type: i0.Input,
|
|
22740
|
+
args: [{
|
|
22741
|
+
isSignal: true,
|
|
22742
|
+
alias: "animationDuration",
|
|
22743
|
+
required: false
|
|
22744
|
+
}]
|
|
22745
|
+
}],
|
|
22746
|
+
formatValue: [{
|
|
22747
|
+
type: i0.Input,
|
|
22748
|
+
args: [{
|
|
22749
|
+
isSignal: true,
|
|
22750
|
+
alias: "formatValue",
|
|
22751
|
+
required: false
|
|
22752
|
+
}]
|
|
22753
|
+
}],
|
|
22754
|
+
ariaLabel: [{
|
|
22755
|
+
type: i0.Input,
|
|
22756
|
+
args: [{
|
|
22757
|
+
isSignal: true,
|
|
22758
|
+
alias: "aria-label",
|
|
22759
|
+
required: false
|
|
22760
|
+
}]
|
|
22761
|
+
}],
|
|
22762
|
+
sliceClick: [{
|
|
22763
|
+
type: i0.Output,
|
|
22764
|
+
args: ["sliceClick"]
|
|
22765
|
+
}],
|
|
22766
|
+
activeSliceChange: [{
|
|
22767
|
+
type: i0.Output,
|
|
22768
|
+
args: ["activeSliceChange"]
|
|
22769
|
+
}]
|
|
22770
|
+
}
|
|
22771
|
+
});
|
|
20708
22772
|
var ProgressBarComponent = class ProgressBarComponent {
|
|
20709
22773
|
i18n = inject(EagamiI18nService);
|
|
20710
22774
|
value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
@@ -69602,6 +71666,6 @@ const ICONS = [
|
|
|
69602
71666
|
ZoomInIconComponent,
|
|
69603
71667
|
ZoomOutIconComponent
|
|
69604
71668
|
].sort((a, b) => a.slug.localeCompare(b.slug));
|
|
69605
|
-
export { AccessibilityIconComponent, AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlarmClockIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrayIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowLeftRightIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpDownIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BanIconComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BoomboxIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CalendarPlusIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CassetteTapeIconComponent, CastIconComponent, CheckCheckIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClipboardPasteIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudSunIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, ContrastIconComponent, CookieIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CosineWaveIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, CrownIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiamondIconComponent, Dice1IconComponent, Dice2IconComponent, Dice3IconComponent, Dice4IconComponent, Dice5IconComponent, Dice6IconComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DoubleExclamationMarkIconComponent, DoubleQuestionMarkIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EjectIconComponent, EmptyStateComponent, EuroIconComponent, ExclamationMarkIconComponent, ExclamationQuestionMarkIconComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileCodeIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FirstPlaceMedalIconComponent, FlagIconComponent, FlameIconComponent, FlaskConicalIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, ForwardIconComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GraduationCapIconComponent, GridIconComponent, GripHorizontalIconComponent, GripVerticalIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeadsetIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, HourglassIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagePlayIconComponent, ImagePlusIconComponent, ImageSearchIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LaptopIconComponent, LayersIconComponent, LayoutDashboardIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, ListOrderedIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicVocalIconComponent, MicroscopeIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MonitorPlayIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NewspaperIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PAGE_SIZE_ALL, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlaneIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PodcastIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, ProjectorIconComponent, PythonIconComponent, QrCodeIconComponent, QuestionExclamationMarkIconComponent, QuestionMarkIconComponent, QuoteIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RadioReceiverIconComponent, RadioTowerIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, Repeat1IconComponent, RepeatIconComponent, ReplyIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCcwSquareIconComponent, RotateCwIconComponent, RowsIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, ScreenShareIconComponent, SearchIconComponent, SecondPlaceMedalIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldAlertIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SineWaveIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, SquarePlayIconComponent, StarIconComponent, StepBackIconComponent, StepComponent, StepForwardIconComponent, StepperComponent, StopCircleIconComponent, StrikethroughIconComponent, StripeIconComponent, SubtitlesIconComponent, SubtitlesOffIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchCameraIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThirdPlaceMedalIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlinkIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserCircleIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WebcamIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, isGrouped, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
|
|
71669
|
+
export { AccessibilityIconComponent, AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlarmClockIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrayIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowLeftRightIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpDownIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BanIconComponent, BarChart2IconComponent, BarChartComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BoomboxIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CalendarPlusIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CassetteTapeIconComponent, CastIconComponent, CheckCheckIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClipboardPasteIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudSunIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, ContrastIconComponent, CookieIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CosineWaveIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, CrownIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiamondIconComponent, Dice1IconComponent, Dice2IconComponent, Dice3IconComponent, Dice4IconComponent, Dice5IconComponent, Dice6IconComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DoubleExclamationMarkIconComponent, DoubleQuestionMarkIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EjectIconComponent, EmptyStateComponent, EuroIconComponent, ExclamationMarkIconComponent, ExclamationQuestionMarkIconComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileCodeIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FirstPlaceMedalIconComponent, FlagIconComponent, FlameIconComponent, FlaskConicalIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, ForwardIconComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GraduationCapIconComponent, GridIconComponent, GripHorizontalIconComponent, GripVerticalIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeadsetIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, HourglassIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagePlayIconComponent, ImagePlusIconComponent, ImageSearchIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LaptopIconComponent, LayersIconComponent, LayoutDashboardIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, LineChartComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, ListOrderedIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicVocalIconComponent, MicroscopeIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MonitorPlayIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NewspaperIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PAGE_SIZE_ALL, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlaneIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PodcastIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, ProjectorIconComponent, PythonIconComponent, QrCodeIconComponent, QuestionExclamationMarkIconComponent, QuestionMarkIconComponent, QuoteIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RadioReceiverIconComponent, RadioTowerIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, Repeat1IconComponent, RepeatIconComponent, ReplyIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCcwSquareIconComponent, RotateCwIconComponent, RowsIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, ScreenShareIconComponent, SearchIconComponent, SecondPlaceMedalIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldAlertIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SineWaveIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, SquarePlayIconComponent, StarIconComponent, StepBackIconComponent, StepComponent, StepForwardIconComponent, StepperComponent, StopCircleIconComponent, StrikethroughIconComponent, StripeIconComponent, SubtitlesIconComponent, SubtitlesOffIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchCameraIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThirdPlaceMedalIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlinkIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserCircleIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WebcamIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, isGrouped, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
|
|
69606
71670
|
|
|
69607
71671
|
//# sourceMappingURL=eagami-ui.mjs.map
|