cats-charts 0.0.55 → 0.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -425,11 +425,11 @@ class ChartLegendComponent {
|
|
|
425
425
|
return typeof this.config.maxWidth === 'string' && this.config.maxWidth.trim().length > 0;
|
|
426
426
|
}
|
|
427
427
|
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 });
|
|
428
|
-
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 (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]=\"isLegendAlignedCenter\"\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 }\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 <\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 >\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: 30px;--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__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%}.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-fill,minmax(30px,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(0,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:30px;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: 10px;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:3px}.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}.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}.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}}\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 });
|
|
428
|
+
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 (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]=\"isLegendAlignedCenter\"\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 }\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 <\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 >\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__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%}.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}}\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 });
|
|
429
429
|
}
|
|
430
430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChartLegendComponent, decorators: [{
|
|
431
431
|
type: Component,
|
|
432
|
-
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 (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]=\"isLegendAlignedCenter\"\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 }\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 <\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 >\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: 30px;--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__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%}.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-fill,minmax(30px,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(0,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:30px;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: 10px;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:3px}.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}.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}.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}}\n"] }]
|
|
432
|
+
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 (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]=\"isLegendAlignedCenter\"\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 }\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 <\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 >\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__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%}.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}}\n"] }]
|
|
433
433
|
}], ctorParameters: () => [{ type: ChartLegendAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
434
434
|
type: Inject,
|
|
435
435
|
args: [PLATFORM_ID]
|