@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.
@@ -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-2xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.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-2xs) * .75))}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, calc(var(--font-size-xs) * .75))}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, calc(var(--font-size-sm) * .75))}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, calc(var(--font-size-md) * .75))}.ea-badge--pin.ea-badge--xl{font-size:var(--ea-badge-font-size, calc(var(--font-size-lg) * .75))}\n"],
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-2xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.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-2xs) * .75))}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, calc(var(--font-size-xs) * .75))}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, calc(var(--font-size-sm) * .75))}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, calc(var(--font-size-md) * .75))}.ea-badge--pin.ea-badge--xl{font-size:var(--ea-badge-font-size, calc(var(--font-size-lg) * .75))}\n"]
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 .4411764706em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{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"],
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 .4411764706em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{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"]
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