igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
134 lines (133 loc) • 7.39 kB
JavaScript
import { __extends } from "tslib";
import { Component, forwardRef, Input, ChangeDetectionStrategy } from '@angular/core';
import { IgxLegendBaseComponent } from './igx-legend-base-component';
import { Legend } from "./Legend";
import { 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 in a IgxDataChartComponent control.
*
* The `Legend` helps end-user identify visuals of chart series with contextual information related to the data plotted in the chart control.
*
* ```html
* <igx-data-chart
* [dataSource]="data"
* [legend]="legend">
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
* <igx-line-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-line-series>
* </igx-data-chart>
* <igx-legend #legend></igx-legend>
* ```
*
* ```ts
* public legend : IgxLegendComponent;
* ```
*/
var IgxLegendComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgxLegendComponent, _super);
function IgxLegendComponent(renderer, elRef, ngZone) {
var _this = _super.call(this) || this;
_this.renderer = renderer;
_this.elRef = elRef;
_this.ngZone = ngZone;
_this._zoneRunner = function (act) { return _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);
return _this;
}
IgxLegendComponent.prototype.ngOnDestroy = function () {
this._wrapper.destroy();
this.i.provideContainer(null);
};
IgxLegendComponent.prototype.createImplementation = function () {
return new Legend();
};
Object.defineProperty(IgxLegendComponent.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxLegendComponent.prototype, "orientation", {
/**
* Gets or sets the current Legend object's orientation.
*/
get: function () {
return this.i.bb;
},
set: function (v) {
this.i.bb = ensureEnum(LegendOrientation_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxLegendComponent.prototype, "textColor", {
/**
* Gets or sets color of text
*/
get: function () {
return this.i.bh;
},
set: function (v) {
this.i.bh = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxLegendComponent.prototype, "textStyle", {
/**
* Gets or sets style of text.
*/
get: function () {
return this.i.bi;
},
set: function (v) {
this.i.bi = v;
},
enumerable: false,
configurable: true
});
IgxLegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxLegendComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
IgxLegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxLegendComponent, selector: "igx-legend", inputs: { orientation: "orientation", textColor: "textColor", textStyle: "textStyle" }, host: { classAttribute: "ig-legend igx-legend" }, providers: [{ provide: IgxLegendBaseComponent, useExisting: forwardRef(function () { return IgxLegendComponent; }) }], 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 font: 12px Verdana, Arial, sans-serif;\n font: var(--legend-item-font, 12px Verdana, Arial, sans-serif);\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}\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 });
return IgxLegendComponent;
}(IgxLegendBaseComponent));
export { IgxLegendComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxLegendComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-legend',
template: "",
providers: [{ provide: IgxLegendBaseComponent, useExisting: forwardRef(function () { return IgxLegendComponent; }) }],
host: { 'class': 'ig-legend igx-legend' },
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 font: 12px Verdana, Arial, sans-serif;\n font: var(--legend-item-font, 12px Verdana, Arial, sans-serif);\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}\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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { orientation: [{
type: Input
}], textColor: [{
type: Input
}], textStyle: [{
type: Input
}] } });