cats-charts 0.0.69 → 0.0.71

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 +117 -103
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/index.d.ts +1 -0
  4. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -446,11 +446,11 @@ class ChartLegendComponent {
446
446
  return typeof this.config.maxWidth === 'string' && this.config.maxWidth.trim().length > 0;
447
447
  }
448
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 });
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 });
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 [class.chart-legend-title--uppercase]=\"config.legendTitleTransform === 'uppercase'\"\n [class.chart-legend-title--lowercase]=\"config.legendTitleTransform === 'lowercase'\"\n [class.chart-legend-title--capitalize]=\"config.legendTitleTransform === 'capitalize'\"\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__viewport .chart-legend-title--uppercase{text-transform:uppercase}.chart-legend__viewport .chart-legend-title--lowercase{text-transform:lowercase}.chart-legend__viewport .chart-legend-title--capitalize{text-transform:capitalize}.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;font-family: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;font-family: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 });
450
450
  }
451
451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, decorators: [{
452
452
  type: Component,
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"] }]
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 [class.chart-legend-title--uppercase]=\"config.legendTitleTransform === 'uppercase'\"\n [class.chart-legend-title--lowercase]=\"config.legendTitleTransform === 'lowercase'\"\n [class.chart-legend-title--capitalize]=\"config.legendTitleTransform === 'capitalize'\"\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__viewport .chart-legend-title--uppercase{text-transform:uppercase}.chart-legend__viewport .chart-legend-title--lowercase{text-transform:lowercase}.chart-legend__viewport .chart-legend-title--capitalize{text-transform:capitalize}.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;font-family: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;font-family: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"] }]
454
454
  }], ctorParameters: () => [{ type: ChartLegendAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
455
455
  type: Inject,
456
456
  args: [PLATFORM_ID]
@@ -1762,58 +1762,50 @@ class LinesChart {
1762
1762
  this.bindEvents();
1763
1763
  }
1764
1764
  /* ------------------ EVENTS ------------------ */
1765
- // private bindEvents() {
1766
- // if (!this.chartInstance) return;
1767
- // this.chartInstance.off();
1768
- // this.events.forEach((eventName) => {
1769
- // this.chartInstance.on(eventName, (params: any) => {
1770
- // if (eventName === 'contextmenu' && params.event?.event) {
1771
- // params.event.event.preventDefault();
1772
- // const container = this.chartInstance.getDom();
1773
- // const rect = container.getBoundingClientRect();
1774
- // this.cardPosition = {
1775
- // x: params.event.event.clientX - rect.left,
1776
- // y: params.event.event.clientY - rect.top,
1777
- // };
1778
- // this.openCard = true;
1779
- // this.cdr.markForCheck();
1780
- // }
1781
- // this.chartEvent.emit({
1782
- // type: eventName,
1783
- // data: params,
1784
- // });
1785
- // });
1786
- // });
1787
- // }
1788
1765
  bindEvents() {
1789
1766
  if (!this.chartInstance)
1790
1767
  return;
1791
1768
  this.chartInstance.off();
1792
- /* ---- existing chart events ---- */
1769
+ // Existing chart events
1793
1770
  this.events.forEach((eventName) => {
1794
1771
  if (eventName === 'contextmenu') {
1795
- /* ---- RIGHT CLICK ANYWHERE IN GRID ---- */
1796
- const zr = this.chartInstance.getZr();
1797
- zr.off('contextmenu');
1798
- zr.on('contextmenu', (event) => {
1799
- event.event.preventDefault();
1800
- const point = [event.offsetX, event.offsetY];
1801
- // check if click is inside grid
1802
- if (!this.chartInstance.containPixel({ gridIndex: 0 }, point))
1803
- return;
1804
- const container = this.chartInstance.getDom();
1805
- const rect = container.getBoundingClientRect();
1806
- this.cardPosition = {
1807
- x: event.event.clientX - rect.left,
1808
- y: event.event.clientY - rect.top,
1809
- };
1810
- this.openCard = true;
1811
- this.cdr.markForCheck();
1772
+ this.chartInstance.on('contextmenu', (params) => {
1773
+ const event = params?.event?.event;
1774
+ if (event) {
1775
+ event.preventDefault();
1776
+ const container = this.chartInstance.getDom();
1777
+ const rect = container.getBoundingClientRect();
1778
+ this.cardPosition = {
1779
+ x: event.clientX - rect.left,
1780
+ y: event.clientY - rect.top,
1781
+ };
1782
+ this.openCard = true;
1783
+ this.cdr.markForCheck();
1784
+ }
1812
1785
  this.chartEvent.emit({
1813
1786
  type: 'contextmenu',
1814
- data: event,
1787
+ data: params,
1815
1788
  });
1816
1789
  });
1790
+ const zr = this.chartInstance.getZr();
1791
+ zr.on('contextmenu', (zrEvent) => {
1792
+ if (!zrEvent.target) {
1793
+ const nativeEvent = zrEvent.event;
1794
+ nativeEvent.preventDefault();
1795
+ const container = this.chartInstance.getDom();
1796
+ const rect = container.getBoundingClientRect();
1797
+ this.cardPosition = {
1798
+ x: nativeEvent.clientX - rect.left,
1799
+ y: nativeEvent.clientY - rect.top,
1800
+ };
1801
+ this.openCard = true;
1802
+ this.cdr.markForCheck();
1803
+ this.chartEvent.emit({
1804
+ type: 'contextmenu',
1805
+ data: { ...zrEvent, isZrEvent: true },
1806
+ });
1807
+ }
1808
+ });
1817
1809
  }
1818
1810
  else {
1819
1811
  this.chartInstance.on(eventName, (params) => {
@@ -2333,58 +2325,50 @@ class BarChart {
2333
2325
  this.bindEvents();
2334
2326
  }
2335
2327
  /* ------------------ EVENTS ------------------ */
2336
- // private bindEvents() {
2337
- // if (!this.chartInstance) return;
2338
- // this.chartInstance.off();
2339
- // this.events.forEach((eventName) => {
2340
- // this.chartInstance.on(eventName, (params: any) => {
2341
- // if (eventName === 'contextmenu' && params.event?.event) {
2342
- // params.event.event.preventDefault();
2343
- // const container = this.chartInstance.getDom();
2344
- // const rect = container.getBoundingClientRect();
2345
- // this.cardPosition = {
2346
- // x: params.event.event.clientX - rect.left,
2347
- // y: params.event.event.clientY - rect.top,
2348
- // };
2349
- // this.openCard = true;
2350
- // this.cdr.markForCheck();
2351
- // }
2352
- // this.chartEvent.emit({
2353
- // type: eventName,
2354
- // data: params,
2355
- // });
2356
- // });
2357
- // });
2358
- // }
2359
2328
  bindEvents() {
2360
2329
  if (!this.chartInstance)
2361
2330
  return;
2362
2331
  this.chartInstance.off();
2363
- /* ---- existing chart events ---- */
2332
+ // Existing chart events
2364
2333
  this.events.forEach((eventName) => {
2365
2334
  if (eventName === 'contextmenu') {
2366
- /* ---- RIGHT CLICK ANYWHERE IN GRID ---- */
2367
- const zr = this.chartInstance.getZr();
2368
- zr.off('contextmenu');
2369
- zr.on('contextmenu', (event) => {
2370
- event.event.preventDefault();
2371
- const point = [event.offsetX, event.offsetY];
2372
- // check if click is inside grid
2373
- if (!this.chartInstance.containPixel({ gridIndex: 0 }, point))
2374
- return;
2375
- const container = this.chartInstance.getDom();
2376
- const rect = container.getBoundingClientRect();
2377
- this.cardPosition = {
2378
- x: event.event.clientX - rect.left,
2379
- y: event.event.clientY - rect.top,
2380
- };
2381
- this.openCard = true;
2382
- this.cdr.markForCheck();
2335
+ this.chartInstance.on('contextmenu', (params) => {
2336
+ const event = params?.event?.event;
2337
+ if (event) {
2338
+ event.preventDefault();
2339
+ const container = this.chartInstance.getDom();
2340
+ const rect = container.getBoundingClientRect();
2341
+ this.cardPosition = {
2342
+ x: event.clientX - rect.left,
2343
+ y: event.clientY - rect.top,
2344
+ };
2345
+ this.openCard = true;
2346
+ this.cdr.markForCheck();
2347
+ }
2383
2348
  this.chartEvent.emit({
2384
2349
  type: 'contextmenu',
2385
- data: event,
2350
+ data: params,
2386
2351
  });
2387
2352
  });
2353
+ const zr = this.chartInstance.getZr();
2354
+ zr.on('contextmenu', (zrEvent) => {
2355
+ if (!zrEvent.target) {
2356
+ const nativeEvent = zrEvent.event;
2357
+ nativeEvent.preventDefault();
2358
+ const container = this.chartInstance.getDom();
2359
+ const rect = container.getBoundingClientRect();
2360
+ this.cardPosition = {
2361
+ x: nativeEvent.clientX - rect.left,
2362
+ y: nativeEvent.clientY - rect.top,
2363
+ };
2364
+ this.openCard = true;
2365
+ this.cdr.markForCheck();
2366
+ this.chartEvent.emit({
2367
+ type: 'contextmenu',
2368
+ data: { ...zrEvent, isZrEvent: true },
2369
+ });
2370
+ }
2371
+ });
2388
2372
  }
2389
2373
  else {
2390
2374
  this.chartInstance.on(eventName, (params) => {
@@ -2799,25 +2783,55 @@ class DoughnutChart {
2799
2783
  if (!this.chartInstance)
2800
2784
  return;
2801
2785
  this.chartInstance.off();
2786
+ // Existing chart events
2802
2787
  this.events.forEach((eventName) => {
2803
- this.chartInstance.on(eventName, (params) => {
2804
- // Prevent browser context menu
2805
- if (eventName === 'contextmenu' && params.event?.event) {
2806
- params.event.event.preventDefault();
2807
- const container = this.chartInstance.getDom();
2808
- const rect = container.getBoundingClientRect();
2809
- this.cardPosition = {
2810
- x: params.event?.event.clientX - rect.left,
2811
- y: params.event?.event.clientY - rect.top,
2812
- };
2813
- this.openCard = true;
2814
- this.cdr.markForCheck();
2815
- }
2816
- this.chartEvent.emit({
2817
- type: eventName,
2818
- data: params,
2788
+ if (eventName === 'contextmenu') {
2789
+ this.chartInstance.on('contextmenu', (params) => {
2790
+ const event = params?.event?.event;
2791
+ if (event) {
2792
+ event.preventDefault();
2793
+ const container = this.chartInstance.getDom();
2794
+ const rect = container.getBoundingClientRect();
2795
+ this.cardPosition = {
2796
+ x: event.clientX - rect.left,
2797
+ y: event.clientY - rect.top,
2798
+ };
2799
+ this.openCard = true;
2800
+ this.cdr.markForCheck();
2801
+ }
2802
+ this.chartEvent.emit({
2803
+ type: 'contextmenu',
2804
+ data: params,
2805
+ });
2819
2806
  });
2820
- });
2807
+ const zr = this.chartInstance.getZr();
2808
+ zr.on('contextmenu', (zrEvent) => {
2809
+ if (!zrEvent.target) {
2810
+ const nativeEvent = zrEvent.event;
2811
+ nativeEvent.preventDefault();
2812
+ const container = this.chartInstance.getDom();
2813
+ const rect = container.getBoundingClientRect();
2814
+ this.cardPosition = {
2815
+ x: nativeEvent.clientX - rect.left,
2816
+ y: nativeEvent.clientY - rect.top,
2817
+ };
2818
+ this.openCard = true;
2819
+ this.cdr.markForCheck();
2820
+ this.chartEvent.emit({
2821
+ type: 'contextmenu',
2822
+ data: { ...zrEvent, isZrEvent: true },
2823
+ });
2824
+ }
2825
+ });
2826
+ }
2827
+ else {
2828
+ this.chartInstance.on(eventName, (params) => {
2829
+ this.chartEvent.emit({
2830
+ type: eventName,
2831
+ data: params,
2832
+ });
2833
+ });
2834
+ }
2821
2835
  });
2822
2836
  }
2823
2837
  /* ------------------ DESTROY ------------------ */