cats-charts 0.0.68 → 0.0.69

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.
Files changed (4) hide show
  1. package/fesm2022/cats-charts.mjs +34 -5
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/index.d.ts +20 -2
  4. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -52,6 +52,7 @@ class ChartLegendAdapter {
52
52
  selected: selected[name] !== false,
53
53
  seriesIndex: index,
54
54
  raw: seriesItem,
55
+ legendType: seriesItem?.legendType,
55
56
  };
56
57
  item.label = config.formatter ? config.formatter(name, item) : name;
57
58
  item.group = config.groupBy ? config.groupBy(item) : undefined;
@@ -141,6 +142,9 @@ const SUPPORTED_ICON_SHAPES = new Set([
141
142
  'emptyPin',
142
143
  'arrow',
143
144
  'emptyArrow',
145
+ 'x',
146
+ 'plus',
147
+ 'thickLine',
144
148
  ]);
145
149
  function getLegendSelected(event) {
146
150
  if (typeof event !== 'object' || event === null || !('selected' in event))
@@ -270,8 +274,14 @@ class ChartLegendComponent {
270
274
  disabled: item.disabled,
271
275
  };
272
276
  }
277
+ legendType(item) {
278
+ return item.legendType ?? this.config.legendType ?? 'default';
279
+ }
280
+ iconForRender(item) {
281
+ return this.legendType(item) === 'line' ? 'line' : item.icon;
282
+ }
273
283
  iconRenderType(item) {
274
- const icon = item.icon.trim();
284
+ const icon = this.iconForRender(item).trim();
275
285
  if (!icon || icon === 'none')
276
286
  return 'none';
277
287
  if (icon.startsWith('image://'))
@@ -286,10 +296,16 @@ class ChartLegendComponent {
286
296
  iconPathData(item) {
287
297
  return item.icon.replace(/^path:\/\//, '');
288
298
  }
289
- iconShapeClass(item) {
290
- const shape = SUPPORTED_ICON_SHAPES.has(item.icon) ? item.icon : 'rect';
299
+ iconShapeClass(icon) {
300
+ const shape = SUPPORTED_ICON_SHAPES.has(icon) ? icon : 'rect';
291
301
  return `chart-legend__icon--${shape}`;
292
302
  }
303
+ isLineMarker(item) {
304
+ return this.legendType(item) === 'lineMarker';
305
+ }
306
+ isLineOnly(item) {
307
+ return this.legendType(item) === 'line';
308
+ }
293
309
  toggle(item, event) {
294
310
  event?.preventDefault();
295
311
  if (!this.chart || item.disabled)
@@ -430,11 +446,11 @@ class ChartLegendComponent {
430
446
  return typeof this.config.maxWidth === 'string' && this.config.maxWidth.trim().length > 0;
431
447
  }
432
448
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, deps: [{ token: ChartLegendAdapter }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
433
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChartLegendComponent, isStandalone: true, selector: "lib-chart-legend", inputs: { chart: "chart", series: "series", colors: "colors", config: "config", itemTemplate: "itemTemplate" }, outputs: { legendEvent: "legendEvent" }, viewQueries: [{ propertyName: "itemsScroller", first: true, predicate: ["itemsScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n @if (this.config.showActionArrow) {\n @if (this.config.actionArrowTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.config.actionArrowTemplate\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n } @else {\n <svg class=\"chart-legend__action-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n }\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n &lt;\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n &gt;\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}.chart-legend__action-arrow{width:12px;height:12px;color:var(--legend-muted-color, #9ca3af);flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
449
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChartLegendComponent, isStandalone: true, selector: "lib-chart-legend", inputs: { chart: "chart", series: "series", colors: "colors", config: "config", itemTemplate: "itemTemplate" }, outputs: { legendEvent: "legendEvent" }, viewQueries: [{ propertyName: "itemsScroller", first: true, predicate: ["itemsScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p\n class=\"chart-legend-title\"\n [style.--legend-title-color]=\"config.legendTitleTextColor || null\"\n [style.--legend-title-font-size]=\"\n config.legendTitleFontSize ? config.legendTitleFontSize + 'px' : null\n \"\n [style.--legend-title-font-style]=\"config.legendTitleFontStyle || null\"\n [style.--legend-title-font-weight]=\"config.legendTitleFontWeight || null\"\n [style.--legend-title-text-decoration]=\"config.legendTitleTextDecoration || null\"\n [style.--legend-title-font-family]=\"config.legendTitleFontFamily || 'initial'\"\n >\n {{ config.title }}\n </p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.--legend-font-style]=\"config.legendFontStyle || null\"\n [style.--legend-font-weight]=\"config.legendFontWeight || null\"\n [style.--legend-text-decoration]=\"config.legendTextDecoration || null\"\n [style.--legend-font-family]=\"config.legendFontFamily || 'initial'\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n }\n @case ('path') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n }\n @case ('shape') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <span\n class=\"chart-legend__icon chart-legend__icon--marker\"\n [ngClass]=\"iconShapeClass(item.icon)\"\n ></span>\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(iconForRender(item))\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n @if (this.config.showActionArrow) {\n @if (this.config.actionArrowTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"this.config.actionArrowTemplate\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n <svg\n class=\"chart-legend__action-arrow\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n }\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n &lt;\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n &gt;\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;--legend-font-style: normal;--legend-font-weight: 400;--legend-text-decoration: none;--legend-font-family: initial;--legend-title-color: #040d17;--legend-title-font-size: 14px;--legend-title-font-style: normal;--legend-title-font-weight: 400;--legend-title-text-decoration: none;--legend-title-font-family: initial;box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{font-weight:var(--legend-title-font-weight);font-size:var(--legend-title-font-size);font-style:var(--legend-title-font-style);text-decoration:var(--legend-title-text-decoration);font-family:var(--legend-title-font-family);color:var(--legend-title-color);white-space:nowrap;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0;color:var(--legend-text-color);font-size:var(--legend-font-size);font-style:var(--legend-font-style);font-weight:var(--legend-font-weight);text-decoration:var(--legend-text-decoration);font-family:var(--legend-font-family)}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{height:11px;border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__icon--x,.chart-legend__icon--plus,.chart-legend__icon--thickLine{background:transparent;position:relative}.chart-legend__icon--x:before,.chart-legend__icon--x:after,.chart-legend__icon--plus:before,.chart-legend__icon--plus:after{content:\"\";position:absolute;left:50%;top:50%;width:100%;height:2px;background:var(--legend-item-color);border-radius:999px;transform:translate(-50%,-50%)}.chart-legend__icon--x:before{transform:translate(-50%,-50%) rotate(45deg)}.chart-legend__icon--x:after{transform:translate(-50%,-50%) rotate(-45deg)}.chart-legend__icon--plus:after{transform:translate(-50%,-50%) rotate(90deg)}.chart-legend__icon--thickLine{height:4px;width:var(--legend-icon-size);border-radius:999px;background:var(--legend-item-color)}.chart-legend__icon--line-marker{display:inline-flex;align-items:center;justify-content:center;padding:0 2px;background:transparent;border:none;min-width:0;width:auto}.chart-legend__icon-line{flex:1 1 1;min-width:8px;height:2px;background:var(--legend-item-color);border-radius:999px}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:inherit}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}.chart-legend__action-arrow{width:12px;height:12px;color:var(--legend-muted-color, #9ca3af);flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
434
450
  }
435
451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, decorators: [{
436
452
  type: Component,
437
- args: [{ selector: 'lib-chart-legend', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p class=\"chart-legend-title\">{{ config.title }}</p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n @case ('path') {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n @case ('shape') {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(item)\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n @if (this.config.showActionArrow) {\n @if (this.config.actionArrowTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.config.actionArrowTemplate\" [ngTemplateOutletContext]=\"templateContext(item)\"></ng-container>\n } @else {\n <svg class=\"chart-legend__action-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n }\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n &lt;\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n &gt;\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;color:var(--legend-text-color);font-size:var(--legend-font-size);box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{white-space:nowrap;font-weight:400;font-size:14px;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:14px}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}.chart-legend__action-arrow{width:12px;height:12px;color:var(--legend-muted-color, #9ca3af);flex:0 0 auto}\n"] }]
453
+ args: [{ selector: 'lib-chart-legend', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.enabled !== false) {\n <nav\n class=\"chart-legend\"\n [class.chart-legend--vertical]=\"isVerticalLegend\"\n [class.chart-legend--scrollable]=\"isScrollableLegend\"\n [class.chart-legend--wrap]=\"!isScrollableLegend\"\n [class.chart-legend--limited-wrap]=\"isLimitedWrapLegend\"\n [ngClass]=\"config.className || null\"\n [style.max-height]=\"config.maxHeight || null\"\n [style.padding]=\"config.padding || '1rem'\"\n [attr.aria-label]=\"config.ariaLabel || 'Chart legend'\"\n >\n <div class=\"chart-legend__viewport\">\n @if (config.title) {\n <p\n class=\"chart-legend-title\"\n [style.--legend-title-color]=\"config.legendTitleTextColor || null\"\n [style.--legend-title-font-size]=\"\n config.legendTitleFontSize ? config.legendTitleFontSize + 'px' : null\n \"\n [style.--legend-title-font-style]=\"config.legendTitleFontStyle || null\"\n [style.--legend-title-font-weight]=\"config.legendTitleFontWeight || null\"\n [style.--legend-title-text-decoration]=\"config.legendTitleTextDecoration || null\"\n [style.--legend-title-font-family]=\"config.legendTitleFontFamily || 'initial'\"\n >\n {{ config.title }}\n </p>\n }\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--start\"\n [disabled]=\"!canScrollStart\"\n (click)=\"scrollLegend(-1, $event)\"\n [attr.aria-label]=\"scrollStartAriaLabel\"\n >\n <img\n src=\"images/legend_left.svg\"\n [class.chart-legend__scroll-icon--up]=\"scrollsVertically\"\n alt=\"left\"\n />\n </button>\n }\n\n <div #itemsScroller class=\"chart-legend__scroller\" (scroll)=\"updateScrollState()\">\n <div\n class=\"chart-legend__items\"\n role=\"list\"\n [class.chart-legend__items--center]=\"\n isLegendAlignedCenter && (!usesInternalLegendScroll || !canScrollLegend)\n \"\n [class.chart-legend__items--end]=\"isLegendAlignedEnd\"\n [style.--legend-text-color]=\"config.legendTextColor || null\"\n [style.--legend-font-size]=\"config.legendFontSize ? config.legendFontSize + 'px' : null\"\n [style.--legend-font-style]=\"config.legendFontStyle || null\"\n [style.--legend-font-weight]=\"config.legendFontWeight || null\"\n [style.--legend-text-decoration]=\"config.legendTextDecoration || null\"\n [style.--legend-font-family]=\"config.legendFontFamily || 'initial'\"\n >\n @for (group of groupedItems; track trackByGroup($index, group)) {\n @if (group.group) {\n <div class=\"chart-legend__group-label\">{{ group.group }}</div>\n }\n\n @for (item of group.items; track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"chart-legend__item\"\n role=\"switch\"\n [class.chart-legend__item--off]=\"!item.selected\"\n [class.chart-legend__item--disabled]=\"item.disabled\"\n [class.chart-legend__item--hovered]=\"state.hoveredName === item.name\"\n [disabled]=\"item.disabled\"\n [attr.aria-checked]=\"item.selected\"\n [attr.aria-label]=\"item.label\"\n [style.--legend-item-color]=\"item.color\"\n [title]=\"itemTitle(item)\"\n (click)=\"toggle(item, $event)\"\n (keydown.enter)=\"toggle(item, $event)\"\n (keydown.space)=\"toggle(item, $event)\"\n (mouseenter)=\"hover(item)\"\n (focus)=\"hover(item)\"\n (mouseleave)=\"leave(item)\"\n (blur)=\"leave(item)\"\n >\n @if (templateFor(item); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n @switch (iconRenderType(item)) {\n @case ('image') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <img class=\"chart-legend__icon-image\" [src]=\"iconImageSrc(item)\" alt=\"\" />\n }\n }\n @case ('path') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <svg\n class=\"chart-legend__icon-path\"\n viewBox=\"-512 -512 1024 1024\"\n aria-hidden=\"true\"\n >\n <path [attr.d]=\"iconPathData(item)\"></path>\n </svg>\n }\n }\n @case ('shape') {\n @if (isLineMarker(item)) {\n <span\n class=\"chart-legend__icon chart-legend__icon--line-marker\"\n aria-hidden=\"true\"\n >\n <span class=\"chart-legend__icon-line\"></span>\n <span\n class=\"chart-legend__icon chart-legend__icon--marker\"\n [ngClass]=\"iconShapeClass(item.icon)\"\n ></span>\n <span class=\"chart-legend__icon-line\"></span>\n </span>\n } @else {\n <span\n class=\"chart-legend__icon\"\n [ngClass]=\"iconShapeClass(iconForRender(item))\"\n aria-hidden=\"true\"\n ></span>\n }\n }\n }\n <span class=\"chart-legend__label\"\n >{{ item.label\n }}{{ this.config.showValue && this.config.valueFormatter && ':' }}</span\n >\n @if (this.config.showValue && this.config.valueFormatter) {\n <span class=\"chart-legend__value\">{{ this.config.valueFormatter(item) }}</span>\n }\n @if (this.config.showActionArrow) {\n @if (this.config.actionArrowTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"this.config.actionArrowTemplate\"\n [ngTemplateOutletContext]=\"templateContext(item)\"\n ></ng-container>\n } @else {\n <svg\n class=\"chart-legend__action-arrow\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n }\n }\n }\n </button>\n }\n }\n </div>\n </div>\n\n @if (usesInternalLegendScroll && canScrollLegend) {\n <button\n type=\"button\"\n class=\"chart-legend__scroll-button chart-legend__scroll-button--end\"\n [disabled]=\"!canScrollEnd\"\n (click)=\"scrollLegend(1, $event)\"\n [attr.aria-label]=\"scrollEndAriaLabel\"\n >\n <img\n src=\"images/legend_right.svg\"\n [class.chart-legend__scroll-icon--down]=\"scrollsVertically\"\n alt=\"right\"\n />\n </button>\n }\n </div>\n\n @if (config.showPagination && pageCount > 1) {\n <div class=\"chart-legend__pagination\" aria-label=\"Legend pages\">\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex === 0\"\n (click)=\"page(-1)\"\n aria-label=\"Previous legend page\"\n >\n &lt;\n </button>\n <span class=\"chart-legend__page-count\">{{ state.pageIndex + 1 }} / {{ pageCount }}</span>\n <button\n type=\"button\"\n class=\"chart-legend__page\"\n [disabled]=\"state.pageIndex + 1 === pageCount\"\n (click)=\"page(1)\"\n aria-label=\"Next legend page\"\n >\n &gt;\n </button>\n </div>\n }\n </nav>\n}\n", styles: [":host{display:block;min-height:0;min-width:0}.chart-legend{--legend-text-color: #040d17;--legend-muted-color: #8a94a6;--legend-border-color: #eaf3fd;--legend-hover-bg: rgba(15, 23, 42, .04);--legend-font-size: 14px;--legend-item-min-height: 28px;--legend-row-gap: 8px;--legend-column-gap: 12px;--legend-font-style: normal;--legend-font-weight: 400;--legend-text-decoration: none;--legend-font-family: initial;--legend-title-color: #040d17;--legend-title-font-size: 14px;--legend-title-font-style: normal;--legend-title-font-weight: 400;--legend-title-text-decoration: none;--legend-title-font-family: initial;box-sizing:border-box;min-height:0;min-width:0;width:100%}:host-context(.dark) .chart-legend,:host-context([data-theme=dark]) .chart-legend{--legend-text-color: #e5e7eb;--legend-muted-color: #9ca3af;--legend-border-color: #374151;--legend-hover-bg: rgba(255, 255, 255, .08)}.chart-legend__viewport{align-items:center;display:flex;gap:4px;min-width:0;width:100%}.chart-legend__viewport .chart-legend-title{font-weight:var(--legend-title-font-weight);font-size:var(--legend-title-font-size);font-style:var(--legend-title-font-style);text-decoration:var(--legend-title-text-decoration);font-family:var(--legend-title-font-family);color:var(--legend-title-color);white-space:nowrap;margin:0 8px 0 0}.chart-legend__scroller{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none}.chart-legend__scroller::-webkit-scrollbar{display:none}.chart-legend--scrollable .chart-legend__scroller{overflow-x:auto;overscroll-behavior-x:contain}.chart-legend--scrollable .chart-legend__scroller::-webkit-scrollbar{display:block;height:6px}.chart-legend__items{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--legend-row-gap) var(--legend-column-gap);min-width:0;color:var(--legend-text-color);font-size:var(--legend-font-size);font-style:var(--legend-font-style);font-weight:var(--legend-font-weight);text-decoration:var(--legend-text-decoration);font-family:var(--legend-font-family)}.chart-legend--scrollable .chart-legend__items{min-width:max-content}.chart-legend--wrap:not(.chart-legend--vertical) .chart-legend__items{flex-wrap:wrap;width:100%}.chart-legend--limited-wrap:not(.chart-legend--vertical) .chart-legend__scroller{max-height:calc(var(--legend-item-min-height) * 2 + var(--legend-row-gap));overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical{height:100%}.chart-legend--vertical .chart-legend__viewport{align-items:stretch;flex-direction:column;height:100%;min-height:0}.chart-legend--vertical .chart-legend__scroller{overflow-x:hidden;overflow-y:hidden}.chart-legend--vertical.chart-legend--scrollable .chart-legend__scroller{overflow-y:auto;overscroll-behavior-y:contain}.chart-legend--vertical .chart-legend__items{align-items:stretch;flex-direction:column;min-width:0;width:100%;height:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__items{align-content:start;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(auto-fit,minmax(28px,max-content));height:100%;justify-content:start;width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__viewport{flex-direction:row}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__items{grid-auto-columns:minmax(1,calc((100% - var(--legend-column-gap)) / 2));width:max-content}.chart-legend__items--center{justify-content:center}.chart-legend__items--end{justify-content:flex-end}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--center{align-content:center;justify-content:start}.chart-legend--vertical.chart-legend--wrap .chart-legend__items--end{align-content:end;justify-content:start}.chart-legend__group-label{flex:0 0 auto;color:var(--legend-muted-color);font-size:12px;font-weight:600;line-height:1.2;margin-top:4px}.chart-legend__item{--legend-item-color: #64748b;align-items:center;background:color-mix(in srgb,var(--legend-item-color) 4%,transparent);border:1px solid color-mix(in srgb,var(--legend-item-color) 25%,transparent);border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:8px;line-height:1.2;min-height:28px;min-width:0;padding:4px 8px;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,opacity .14s ease}.chart-legend--vertical .chart-legend__item{justify-content:flex-start;width:100%}.chart-legend--vertical.chart-legend--wrap .chart-legend__item{width:auto}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__item{width:100%}.chart-legend__scroll-button{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;height:28px;justify-content:center;line-height:1;width:28px}.chart-legend--vertical .chart-legend__scroll-button{width:100%}.chart-legend--vertical.chart-legend--limited-wrap .chart-legend__scroll-button{height:auto;min-height:28px;width:28px}.chart-legend__scroll-button img{display:block;height:10px;width:10px}.chart-legend__scroll-icon--up,.chart-legend__scroll-icon--down{transform:rotate(90deg)}.chart-legend__scroll-button:disabled{cursor:default;opacity:.42}.chart-legend__item:hover,.chart-legend__item:focus-visible,.chart-legend__item--hovered{outline:none}.chart-legend__item--off{color:var(--legend-muted-color);filter:grayscale(1);opacity:.68}.chart-legend__item--disabled{cursor:not-allowed;opacity:.48}.chart-legend__icon,.chart-legend__icon-image,.chart-legend__icon-path{--legend-icon-size: 12px;background:var(--legend-item-color);box-sizing:border-box;display:inline-block;flex:0 0 auto;height:var(--legend-icon-size);width:var(--legend-icon-size)}.chart-legend__icon-image,.chart-legend__icon-path{background:transparent;object-fit:contain}.chart-legend__icon-path path{fill:var(--legend-item-color);stroke:var(--legend-item-color)}.chart-legend__icon--line,.chart-legend__icon--emptyLine{height:11px;border-radius:999px;background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--emptyLine{background:linear-gradient(to bottom,transparent 0 4px,var(--legend-item-color) 4px 6px,transparent 6px 100%)}.chart-legend__icon--area{background:linear-gradient(to bottom,var(--legend-item-color),color-mix(in srgb,var(--legend-item-color) 12%,transparent));border-top:3px solid var(--legend-item-color)}.chart-legend__icon--circle{border-radius:50%}.chart-legend__icon--emptyCircle{background:transparent;border:2px solid var(--legend-item-color);border-radius:50%}.chart-legend__icon--rect,.chart-legend__icon--emptyRect,.chart-legend__icon--square,.chart-legend__icon--emptySquare{border-radius:2px}.chart-legend__icon--emptyRect,.chart-legend__icon--emptySquare{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--roundRect,.chart-legend__icon--emptyRoundRect{border-radius:6px}.chart-legend__icon--emptyRoundRect{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--triangle,.chart-legend__icon--emptyTriangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.chart-legend__icon--emptyTriangle{background:var(--legend-item-color)}.chart-legend__icon--diamond,.chart-legend__icon--emptyDiamond{transform:rotate(45deg)}.chart-legend__icon--emptyDiamond{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--pin,.chart-legend__icon--emptyPin{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.chart-legend__icon--emptyPin{background:transparent;border:2px solid var(--legend-item-color)}.chart-legend__icon--arrow,.chart-legend__icon--emptyArrow{clip-path:polygon(0 35%,58% 35%,58% 10%,100% 50%,58% 90%,58% 65%,0 65%)}.chart-legend__icon--emptyArrow{opacity:.72}.chart-legend__icon--x,.chart-legend__icon--plus,.chart-legend__icon--thickLine{background:transparent;position:relative}.chart-legend__icon--x:before,.chart-legend__icon--x:after,.chart-legend__icon--plus:before,.chart-legend__icon--plus:after{content:\"\";position:absolute;left:50%;top:50%;width:100%;height:2px;background:var(--legend-item-color);border-radius:999px;transform:translate(-50%,-50%)}.chart-legend__icon--x:before{transform:translate(-50%,-50%) rotate(45deg)}.chart-legend__icon--x:after{transform:translate(-50%,-50%) rotate(-45deg)}.chart-legend__icon--plus:after{transform:translate(-50%,-50%) rotate(90deg)}.chart-legend__icon--thickLine{height:4px;width:var(--legend-icon-size);border-radius:999px;background:var(--legend-item-color)}.chart-legend__icon--line-marker{display:inline-flex;align-items:center;justify-content:center;padding:0 2px;background:transparent;border:none;min-width:0;width:auto}.chart-legend__icon-line{flex:1 1 1;min-width:8px;height:2px;background:var(--legend-item-color);border-radius:999px}.chart-legend__item--off .chart-legend__icon,.chart-legend__item--off .chart-legend__icon-path path{filter:grayscale(1);opacity:.68}.chart-legend__item--off .chart-legend__icon--emptyCircle,.chart-legend__item--off .chart-legend__icon--emptyRect,.chart-legend__item--off .chart-legend__icon--emptyRoundRect,.chart-legend__item--off .chart-legend__icon--emptySquare,.chart-legend__item--off .chart-legend__icon--emptyDiamond,.chart-legend__item--off .chart-legend__icon--emptyPin,.chart-legend__item--off .chart-legend__icon--emptyLine{filter:grayscale(1);opacity:.68}.chart-legend__content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.chart-legend__value{font-weight:600;font-size:inherit}.chart-legend__item--off .chart-legend__icon--emptyTriangle{filter:grayscale(1);opacity:.68}.chart-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chart-legend__pagination{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.chart-legend__page{align-items:center;background:transparent;border:1px solid var(--legend-border-color);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;height:28px;justify-content:center;width:28px}.chart-legend__page:disabled{cursor:default;opacity:.42}.chart-legend__page-count{color:var(--legend-muted-color);font-size:12px}@media (max-width: 640px){.chart-legend__items{padding-bottom:2px}}.chart-legend__action-arrow{width:12px;height:12px;color:var(--legend-muted-color, #9ca3af);flex:0 0 auto}\n"] }]
438
454
  }], ctorParameters: () => [{ type: ChartLegendAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
439
455
  type: Inject,
440
456
  args: [PLATFORM_ID]
@@ -1682,6 +1698,7 @@ class LinesChart {
1682
1698
  }
1683
1699
  : undefined,
1684
1700
  ...s,
1701
+ symbol: this.resolveSeriesSymbol(s['symbol']),
1685
1702
  label: {
1686
1703
  show: this.config?.showLabel ?? false,
1687
1704
  position: this.config?.labelPosition ?? 'top',
@@ -1707,6 +1724,18 @@ class LinesChart {
1707
1724
  ],
1708
1725
  };
1709
1726
  }
1727
+ resolveSeriesSymbol(symbol) {
1728
+ switch (symbol) {
1729
+ case 'plus':
1730
+ return 'path://M-2,-8 L2,-8 L2,-2 L8,-2 L8,2 L2,2 L2,8 L-2,8 L-2,2 L-8,2 L-8,-2 L-2,-2 Z';
1731
+ case 'x':
1732
+ return 'path://M-6,-4 L-4,-6 L0,-2 L4,-6 L6,-4 L2,0 L6,4 L4,6 L0,2 L-4,6 L-6,4 L-2,0 Z';
1733
+ case 'thickLine':
1734
+ return 'path://M -8 -2 L 8 -2 L 8 2 L -8 2 Z';
1735
+ default:
1736
+ return symbol;
1737
+ }
1738
+ }
1710
1739
  enableDataZoom(active) {
1711
1740
  if (!this.chartInstance)
1712
1741
  return;