igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
97 lines (96 loc) • 6.47 kB
JavaScript
import { Component, Renderer2, ElementRef, forwardRef, Input, NgZone, ChangeDetectionStrategy } from '@angular/core';
import { IgxLegendBaseComponent } from './igx-legend-base-component';
import { ItemLegend } from "./ItemLegend";
import { LegendOrientation, LegendOrientation_$type } from './LegendOrientation';
import { AngularRenderer } from "igniteui-angular-core";
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { ensureEnum } from "igniteui-angular-core";
import * as i0 from "@angular/core";
/**
* Represents a legend that displays an item for each point in the series.
*
* You can use the `ItemLegend` to display a legend item for each data member bound to the `BubbleSeries`
*/
export class IgxItemLegendComponent extends IgxLegendBaseComponent {
constructor(renderer, elRef, ngZone) {
super();
this.renderer = renderer;
this.elRef = elRef;
this.ngZone = ngZone;
this._zoneRunner = (act) => this.ngZone.run(act);
this.container = renderer.createElement("div");
renderer.appendChild(elRef.nativeElement, this.container);
var root;
root = this.container;
if (this.container != null) {
root = this.container;
}
var ren = new AngularRenderer(root, this.renderer, window.document, this.ngZone, true, DataChartStylingDefaults);
this._wrapper = ren;
this.i.provideContainer(ren);
}
ngOnDestroy() {
this._wrapper.destroy();
this.i.provideContainer(null);
}
createImplementation() {
return new ItemLegend();
}
get i() {
return this._implementation;
}
createItemwiseLegendItems(legendItems, series) {
this.i.createItemwiseLegendItems(legendItems, series);
}
exportVisualData() {
return this.i.exportVisualData();
}
exportSerializedVisualData() {
return this.i.exportSerializedVisualData();
}
/**
* Gets whether or not this legend supports itemwise visuals
*/
get isItemwise() {
return this.i.isItemwise;
}
/**
* Gets or sets the current Legend object's orientation.
*/
get orientation() {
return this.i.bk;
}
set orientation(v) {
this.i.bk = ensureEnum(LegendOrientation_$type, v);
}
/**
* Gets or sets color of text
*/
get textColor() {
return this.i.bq;
}
set textColor(v) {
this.i.bq = v;
}
/**
* Gets or sets style of text.
*/
get textStyle() {
return this.i.br;
}
set textStyle(v) {
this.i.br = v;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0-rc.1", ngImport: i0, type: IgxItemLegendComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0-rc.1", type: IgxItemLegendComponent, isStandalone: true, selector: "igx-item-legend", inputs: { orientation: "orientation", textColor: "textColor", textStyle: "textStyle" }, host: { classAttribute: "ig-item-legend igx-item-legend" }, providers: [{ provide: IgxLegendBaseComponent, useExisting: forwardRef(() => IgxItemLegendComponent) }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host {\n display: block;\n}\n.ig-legend {\n border: none;\n border: var(--legend-border, none);\n overflow: auto;\n overflow: var(--legend-item-overflow, auto);\n}\n.ig-chart-legend-item-text {\n vertical-align: middle;\n vertical-align: var(--legend-item-vertical-align, middle);\n}\n.ig-chart-legend-items-list\n{\n padding: 5px;\n padding: var(--legend-item-padding, 5px);\n margin: 0px;\n margin: var(--legend-item-margin, 0px);\n background-color: transparent;\n background-color: var(--legend-list-background-color, transparent);\n font: 13px \"Titillium Web\", Verdana, Arial, sans-serif;\n font: var(--legend-item-font, 13px \"Titillium Web\", Verdana, Arial, sans-serif);\n color: rgba(37,37,37,1.0);\n color: var(--text-color, rgba(37,37,37,1.0));\n}\n.ig-chart-legend-item-badge, .ui-chart-legend-item-badge, canvas\n{\n vertical-align: middle;\n vertical-align: var(--legend-item-badge-vertical-align, middle);\n}\n.ig-chart-legend-item\n{\n background-color: transparent;\n background-color: var(--legend-item-background-color, transparent);\n}"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0-rc.1", ngImport: i0, type: IgxItemLegendComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-item-legend', template: ``, host: { 'class': 'ig-item-legend igx-item-legend' }, providers: [{ provide: IgxLegendBaseComponent, useExisting: forwardRef(() => IgxItemLegendComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host {\n display: block;\n}\n.ig-legend {\n border: none;\n border: var(--legend-border, none);\n overflow: auto;\n overflow: var(--legend-item-overflow, auto);\n}\n.ig-chart-legend-item-text {\n vertical-align: middle;\n vertical-align: var(--legend-item-vertical-align, middle);\n}\n.ig-chart-legend-items-list\n{\n padding: 5px;\n padding: var(--legend-item-padding, 5px);\n margin: 0px;\n margin: var(--legend-item-margin, 0px);\n background-color: transparent;\n background-color: var(--legend-list-background-color, transparent);\n font: 13px \"Titillium Web\", Verdana, Arial, sans-serif;\n font: var(--legend-item-font, 13px \"Titillium Web\", Verdana, Arial, sans-serif);\n color: rgba(37,37,37,1.0);\n color: var(--text-color, rgba(37,37,37,1.0));\n}\n.ig-chart-legend-item-badge, .ui-chart-legend-item-badge, canvas\n{\n vertical-align: middle;\n vertical-align: var(--legend-item-badge-vertical-align, middle);\n}\n.ig-chart-legend-item\n{\n background-color: transparent;\n background-color: var(--legend-item-background-color, transparent);\n}"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { orientation: [{
type: Input
}], textColor: [{
type: Input
}], textStyle: [{
type: Input
}] } });