@taiga-ui/addon-charts 2.44.0 → 2.45.0

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 (21) hide show
  1. package/bundles/taiga-ui-addon-charts-components-arc-chart.umd.js +41 -6
  2. package/bundles/taiga-ui-addon-charts-components-arc-chart.umd.js.map +1 -1
  3. package/bundles/taiga-ui-addon-charts-components-arc-chart.umd.min.js +2 -2
  4. package/bundles/taiga-ui-addon-charts-components-arc-chart.umd.min.js.map +1 -1
  5. package/bundles/taiga-ui-addon-charts-components-line-chart.umd.js +1 -1
  6. package/bundles/taiga-ui-addon-charts-components-line-chart.umd.min.js +1 -1
  7. package/bundles/taiga-ui-addon-charts-components-line-chart.umd.min.js.map +1 -1
  8. package/components/arc-chart/arc-chart.component.d.ts +7 -1
  9. package/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.metadata.json +1 -1
  10. package/components/line-chart/taiga-ui-addon-charts-components-line-chart.metadata.json +1 -1
  11. package/esm2015/components/arc-chart/arc-chart.component.js +33 -5
  12. package/esm2015/components/line-chart/line-chart.component.js +1 -1
  13. package/esm5/components/arc-chart/arc-chart.component.js +43 -6
  14. package/esm5/components/line-chart/line-chart.component.js +1 -1
  15. package/fesm2015/taiga-ui-addon-charts-components-arc-chart.js +32 -4
  16. package/fesm2015/taiga-ui-addon-charts-components-arc-chart.js.map +1 -1
  17. package/fesm2015/taiga-ui-addon-charts-components-line-chart.js +1 -1
  18. package/fesm5/taiga-ui-addon-charts-components-arc-chart.js +42 -5
  19. package/fesm5/taiga-ui-addon-charts-components-arc-chart.js.map +1 -1
  20. package/fesm5/taiga-ui-addon-charts-components-line-chart.js +1 -1
  21. package/package.json +3 -3
package/esm5/components/arc-chart/arc-chart.component.js CHANGED
@@ -1,7 +1,9 @@
1
- import { __decorate, __param } from "tslib";
2
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Inject, Input, } from '@angular/core';
1
+ import { __decorate, __param, __read, __spread } from "tslib";
2
+ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, Output, QueryList, ViewChildren, } from '@angular/core';
3
3
  import { DomSanitizer, SafeValue } from '@angular/platform-browser';
4
- import { tuiDefaultProp } from '@taiga-ui/cdk';
4
+ import { tuiDefaultProp, typedFromEvent } from '@taiga-ui/cdk';
5
+ import { merge, ReplaySubject } from 'rxjs';
6
+ import { mapTo, startWith, switchMap, tap } from 'rxjs/operators';
5
7
  // 3/4 with 1% safety offset
6
8
  var ARC = 0.76;
7
9
  var SIZE = {
@@ -23,11 +25,18 @@ var TuiArcChartComponent = /** @class */ (function () {
23
25
  function TuiArcChartComponent(sanitizer, changeDetectorRef) {
24
26
  var _this = this;
25
27
  this.sanitizer = sanitizer;
28
+ this.arcs$ = new ReplaySubject(1);
26
29
  this.value = [];
27
30
  this.size = 'm';
28
31
  this.max = 100;
29
32
  this.minLabel = '0%';
30
33
  this.maxLabel = '100%';
34
+ this.activeItemIndex = NaN;
35
+ this.activeItemIndexChange = this.arcs$.pipe(switchMap(function (arcs) {
36
+ return arcs.changes.pipe(startWith(null), switchMap(function () { return merge.apply(void 0, __spread(arcsToIndex(arcs))); }));
37
+ }), tap(function (index) {
38
+ _this.activeItemIndex = index;
39
+ }));
31
40
  this.initialized = false;
32
41
  // So initial animation works
33
42
  setTimeout(function () {
@@ -35,6 +44,13 @@ var TuiArcChartComponent = /** @class */ (function () {
35
44
  changeDetectorRef.markForCheck();
36
45
  });
37
46
  }
47
+ Object.defineProperty(TuiArcChartComponent.prototype, "arcs", {
48
+ set: function (arcs) {
49
+ this.arcs$.next(arcs);
50
+ },
51
+ enumerable: true,
52
+ configurable: true
53
+ });
38
54
  Object.defineProperty(TuiArcChartComponent.prototype, "width", {
39
55
  get: function () {
40
56
  return SIZE[this.size];
@@ -49,6 +65,9 @@ var TuiArcChartComponent = /** @class */ (function () {
49
65
  enumerable: true,
50
66
  configurable: true
51
67
  });
68
+ TuiArcChartComponent.prototype.isInactive = function (index) {
69
+ return !isNaN(this.activeItemIndex) && index !== this.activeItemIndex;
70
+ };
52
71
  TuiArcChartComponent.prototype.getInset = function (index) {
53
72
  return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);
54
73
  };
@@ -68,6 +87,9 @@ var TuiArcChartComponent = /** @class */ (function () {
68
87
  { type: DomSanitizer, decorators: [{ type: Inject, args: [DomSanitizer,] }] },
69
88
  { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
70
89
  ]; };
90
+ __decorate([
91
+ ViewChildren('arc')
92
+ ], TuiArcChartComponent.prototype, "arcs", null);
71
93
  __decorate([
72
94
  Input(),
73
95
  tuiDefaultProp()
@@ -89,6 +111,13 @@ var TuiArcChartComponent = /** @class */ (function () {
89
111
  Input(),
90
112
  tuiDefaultProp()
91
113
  ], TuiArcChartComponent.prototype, "maxLabel", void 0);
114
+ __decorate([
115
+ Input(),
116
+ tuiDefaultProp()
117
+ ], TuiArcChartComponent.prototype, "activeItemIndex", void 0);
118
+ __decorate([
119
+ Output()
120
+ ], TuiArcChartComponent.prototype, "activeItemIndexChange", void 0);
92
121
  __decorate([
93
122
  HostBinding('style.width.rem'),
94
123
  HostBinding('style.height.rem')
@@ -99,9 +128,9 @@ var TuiArcChartComponent = /** @class */ (function () {
99
128
  TuiArcChartComponent = __decorate([
100
129
  Component({
101
130
  selector: 'tui-arc-chart',
102
- template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
131
+ template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n #arc\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [class.t-value_inactive]=\"isInactive(index)\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
103
132
  changeDetection: ChangeDetectionStrategy.OnPush,
104
- styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem}.t-value{transition-property:stroke-dashoffset;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs)}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{flex:1}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
133
+ styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem;pointer-events:none}.t-value{pointer-events:auto;transition:stroke-dashoffset var(--tui-duration) ease-in-out,opacity var(--tui-duration) ease-in-out .1s}.t-value_inactive{transition-property:stroke-dashoffset,opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;opacity:.16}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs);pointer-events:none}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{pointer-events:auto}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
105
134
  }),
106
135
  __param(0, Inject(DomSanitizer)),
107
136
  __param(1, Inject(ChangeDetectorRef))
@@ -109,4 +138,12 @@ var TuiArcChartComponent = /** @class */ (function () {
109
138
  return TuiArcChartComponent;
110
139
  }());
111
140
  export { TuiArcChartComponent };
112
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJjLWNoYXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9hZGRvbi1jaGFydHMvY29tcG9uZW50cy9hcmMtY2hhcnQvIiwic291cmNlcyI6WyJhcmMtY2hhcnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEdBQ1IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFlBQVksRUFBRSxTQUFTLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRzdDLDRCQUE0QjtBQUM1QixJQUFNLEdBQUcsR0FBRyxJQUFJLENBQUM7QUFFakIsSUFBTSxJQUFJLEdBQThCO0lBQ3BDLENBQUMsRUFBRSxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUU7SUFDTCxFQUFFLEVBQUUsRUFBRTtDQUNULENBQUM7QUFFRixJQUFNLEtBQUssR0FBOEI7SUFDckMsQ0FBQyxFQUFFLElBQUk7SUFDUCxDQUFDLEVBQUUsS0FBSztJQUNSLEVBQUUsRUFBRSxNQUFNO0NBQ2IsQ0FBQztBQUVGLElBQU0sR0FBRyxHQUE4QjtJQUNuQyxDQUFDLEVBQUUsS0FBSztJQUNSLENBQUMsRUFBRSxNQUFNO0lBQ1QsRUFBRSxFQUFFLElBQUk7Q0FDWCxDQUFDO0FBUUY7SUF3QkksOEJBQzJDLFNBQXVCLEVBQ25DLGlCQUFvQztRQUZuRSxpQkFTQztRQVIwQyxjQUFTLEdBQVQsU0FBUyxDQUFjO1FBdEJsRSxVQUFLLEdBQXNCLEVBQUUsQ0FBQztRQUs5QixTQUFJLEdBQWMsR0FBRyxDQUFDO1FBSXRCLFFBQUcsR0FBRyxHQUFHLENBQUM7UUFJVixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBSWhCLGFBQVEsR0FBRyxNQUFNLENBQUM7UUFFbEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFNaEIsNkJBQTZCO1FBQzdCLFVBQVUsQ0FBQztZQUNQLEtBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1lBQ3hCLGlCQUFpQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3JDLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUlELHNCQUFJLHVDQUFLO2FBQVQ7WUFDSSxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0IsQ0FBQzs7O09BQUE7SUFHRCxzQkFBSSw2Q0FBVzthQUFmO1lBQ0ksT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzVCLENBQUM7OztPQUFBO0lBRUQsdUNBQVEsR0FBUixVQUFTLEtBQWE7UUFDbEIsT0FBTyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsR0FBRyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUM5RSxDQUFDO0lBRUQsMENBQVcsR0FBWCxVQUFZLEtBQWE7UUFDckIsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCx3Q0FBUyxHQUFULFVBQVUsS0FBYTtRQUNuQixPQUFPLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDbkQsQ0FBQztJQUVELHdDQUFTLEdBQVQsVUFBVSxLQUFhO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ25GLENBQUM7SUFFRCx1Q0FBUSxHQUFSLFVBQVMsS0FBYTtRQUNsQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsd0JBQXdCLENBQzFDLHFCQUFtQixLQUFLLDhCQUF3QixLQUFLLEdBQUcsQ0FBQyxRQUFJLENBQ2hFLENBQUM7SUFDTixDQUFDOztnQkF6Q3FELFlBQVksdUJBQTdELE1BQU0sU0FBQyxZQUFZO2dCQUMwQixpQkFBaUIsdUJBQTlELE1BQU0sU0FBQyxpQkFBaUI7O0lBdkI3QjtRQUZDLEtBQUssRUFBRTtRQUNQLGNBQWMsRUFBRTt1REFDYTtJQUs5QjtRQUhDLEtBQUssRUFBRTtRQUNQLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQztRQUM3QixjQUFjLEVBQUU7c0RBQ0s7SUFJdEI7UUFGQyxLQUFLLEVBQUU7UUFDUCxjQUFjLEVBQUU7cURBQ1A7SUFJVjtRQUZDLEtBQUssRUFBRTtRQUNQLGNBQWMsRUFBRTswREFDRDtJQUloQjtRQUZDLEtBQUssRUFBRTtRQUNQLGNBQWMsRUFBRTswREFDQztJQWlCbEI7UUFGQyxXQUFXLENBQUMsaUJBQWlCLENBQUM7UUFDOUIsV0FBVyxDQUFDLGtCQUFrQixDQUFDO3FEQUcvQjtJQUdEO1FBREMsV0FBVyxDQUFDLHVCQUF1QixDQUFDOzJEQUdwQztJQTVDUSxvQkFBb0I7UUFOaEMsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUFFLGVBQWU7WUFDekIsay9CQUF3QztZQUV4QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7U0FDbEQsQ0FBQztRQTBCTyxXQUFBLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQTtRQUNwQixXQUFBLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO09BMUJyQixvQkFBb0IsQ0FtRWhDO0lBQUQsMkJBQUM7Q0FBQSxBQW5FRCxJQW1FQztTQW5FWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBIb3N0QmluZGluZyxcbiAgICBJbmplY3QsXG4gICAgSW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtEb21TYW5pdGl6ZXIsIFNhZmVWYWx1ZX0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQge3R1aURlZmF1bHRQcm9wfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7VHVpU2l6ZVhMfSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5cbi8vIDMvNCB3aXRoIDElIHNhZmV0eSBvZmZzZXRcbmNvbnN0IEFSQyA9IDAuNzY7XG5cbmNvbnN0IFNJWkU6IFJlY29yZDxUdWlTaXplWEwsIG51bWJlcj4gPSB7XG4gICAgbTogOSxcbiAgICBsOiAxMSxcbiAgICB4bDogMTYsXG59O1xuXG5jb25zdCBXSURUSDogUmVjb3JkPFR1aVNpemVYTCwgbnVtYmVyPiA9IHtcbiAgICBtOiAwLjI1LFxuICAgIGw6IDAuMzc1LFxuICAgIHhsOiAwLjU2MjUsXG59O1xuXG5jb25zdCBHQVA6IFJlY29yZDxUdWlTaXplWEwsIG51bWJlcj4gPSB7XG4gICAgbTogMC4xMjUsXG4gICAgbDogMC4xODc1LFxuICAgIHhsOiAwLjI1LFxufTtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktYXJjLWNoYXJ0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXJjLWNoYXJ0LnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2FyYy1jaGFydC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFyY0NoYXJ0Q29tcG9uZW50IHtcbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgdmFsdWU6IHJlYWRvbmx5IG51bWJlcltdID0gW107XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLXNpemUnKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgc2l6ZTogVHVpU2l6ZVhMID0gJ20nO1xuXG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIG1heCA9IDEwMDtcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBtaW5MYWJlbCA9ICcwJSc7XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgbWF4TGFiZWwgPSAnMTAwJSc7XG5cbiAgICBpbml0aWFsaXplZCA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoRG9tU2FuaXRpemVyKSBwcml2YXRlIHJlYWRvbmx5IHNhbml0aXplcjogRG9tU2FuaXRpemVyLFxuICAgICAgICBASW5qZWN0KENoYW5nZURldGVjdG9yUmVmKSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgKSB7XG4gICAgICAgIC8vIFNvIGluaXRpYWwgYW5pbWF0aW9uIHdvcmtzXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5pbml0aWFsaXplZCA9IHRydWU7XG4gICAgICAgICAgICBjaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aC5yZW0nKVxuICAgIEBIb3N0QmluZGluZygnc3R5bGUuaGVpZ2h0LnJlbScpXG4gICAgZ2V0IHdpZHRoKCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBTSVpFW3RoaXMuc2l6ZV07XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5zdHJva2VXaWR0aC5yZW0nKVxuICAgIGdldCBzdHJva2VXaWR0aCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gV0lEVEhbdGhpcy5zaXplXTtcbiAgICB9XG5cbiAgICBnZXRJbnNldChpbmRleDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc3Ryb2tlV2lkdGggLyAyICsgaW5kZXggKiAodGhpcy5zdHJva2VXaWR0aCArIEdBUFt0aGlzLnNpemVdKTtcbiAgICB9XG5cbiAgICBnZXREaWFtZXRlcihpbmRleDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIFNJWkVbdGhpcy5zaXplXSAtIDIgKiB0aGlzLmdldEluc2V0KGluZGV4KTtcbiAgICB9XG5cbiAgICBnZXRMZW5ndGgoaW5kZXg6IG51bWJlcik6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBNYXRoLlBJICogdGhpcy5nZXREaWFtZXRlcihpbmRleCkgKiBBUkM7XG4gICAgfVxuXG4gICAgZ2V0T2Zmc2V0KGluZGV4OiBudW1iZXIpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5nZXRMZW5ndGgoaW5kZXgpICogKDEgLSBNYXRoLm1pbih0aGlzLnZhbHVlW2luZGV4XSAvIHRoaXMubWF4LCAxKSk7XG4gICAgfVxuXG4gICAgZ2V0Q29sb3IoaW5kZXg6IG51bWJlcik6IFNhZmVWYWx1ZSB7XG4gICAgICAgIHJldHVybiB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0U3R5bGUoXG4gICAgICAgICAgICBgdmFyKC0tdHVpLWNoYXJ0LSR7aW5kZXh9LCB2YXIoLS10dWktc3VwcG9ydC0wJHtpbmRleCArIDF9KSlgLFxuICAgICAgICApO1xuICAgIH1cbn1cbiJdfQ==
141
+ function arcsToIndex(arcs) {
142
+ return arcs
143
+ .toArray()
144
+ .map(function (_a, index) {
145
+ var nativeElement = _a.nativeElement;
146
+ return merge(typedFromEvent(nativeElement, 'mouseenter').pipe(mapTo(index)), typedFromEvent(nativeElement, 'mouseleave').pipe(mapTo(NaN)));
147
+ });
148
+ }
149
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJjLWNoYXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9hZGRvbi1jaGFydHMvY29tcG9uZW50cy9hcmMtY2hhcnQvIiwic291cmNlcyI6WyJhcmMtY2hhcnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsWUFBWSxHQUNmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxZQUFZLEVBQUUsU0FBUyxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFDLGNBQWMsRUFBRSxjQUFjLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUFDLEtBQUssRUFBYyxhQUFhLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDdEQsT0FBTyxFQUFDLEtBQUssRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRWhFLDRCQUE0QjtBQUM1QixJQUFNLEdBQUcsR0FBRyxJQUFJLENBQUM7QUFFakIsSUFBTSxJQUFJLEdBQThCO0lBQ3BDLENBQUMsRUFBRSxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUU7SUFDTCxFQUFFLEVBQUUsRUFBRTtDQUNULENBQUM7QUFFRixJQUFNLEtBQUssR0FBOEI7SUFDckMsQ0FBQyxFQUFFLElBQUk7SUFDUCxDQUFDLEVBQUUsS0FBSztJQUNSLEVBQUUsRUFBRSxNQUFNO0NBQ2IsQ0FBQztBQUVGLElBQU0sR0FBRyxHQUE4QjtJQUNuQyxDQUFDLEVBQUUsS0FBSztJQUNSLENBQUMsRUFBRSxNQUFNO0lBQ1QsRUFBRSxFQUFFLElBQUk7Q0FDWCxDQUFDO0FBUUY7SUFnREksOEJBQzJDLFNBQXVCLEVBQ25DLGlCQUFvQztRQUZuRSxp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QUNELGNBQWMsQ0FBQyxhQUFhLEVBQUUsWUFBWSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUM5RCxjQUFjLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FDL0Q7SUFIRCxDQUdDLENBQ0osQ0FBQztBQUNWLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIEluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgUXVlcnlMaXN0LFxuICAgIFZpZXdDaGlsZHJlbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0RvbVNhbml0aXplciwgU2FmZVZhbHVlfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7dHVpRGVmYXVsdFByb3AsIHR5cGVkRnJvbUV2ZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7VHVpU2l6ZVhMfSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge21lcmdlLCBPYnNlcnZhYmxlLCBSZXBsYXlTdWJqZWN0fSBmcm9tICdyeGpzJztcbmltcG9ydCB7bWFwVG8sIHN0YXJ0V2l0aCwgc3dpdGNoTWFwLCB0YXB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuLy8gMy80IHdpdGggMSUgc2FmZXR5IG9mZnNldFxuY29uc3QgQVJDID0gMC43NjtcblxuY29uc3QgU0laRTogUmVjb3JkPFR1aVNpemVYTCwgbnVtYmVyPiA9IHtcbiAgICBtOiA5LFxuICAgIGw6IDExLFxuICAgIHhsOiAxNixcbn07XG5cbmNvbnN0IFdJRFRIOiBSZWNvcmQ8VHVpU2l6ZVhMLCBudW1iZXI+ID0ge1xuICAgIG06IDAuMjUsXG4gICAgbDogMC4zNzUsXG4gICAgeGw6IDAuNTYyNSxcbn07XG5cbmNvbnN0IEdBUDogUmVjb3JkPFR1aVNpemVYTCwgbnVtYmVyPiA9IHtcbiAgICBtOiAwLjEyNSxcbiAgICBsOiAwLjE4NzUsXG4gICAgeGw6IDAuMjUsXG59O1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1hcmMtY2hhcnQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hcmMtY2hhcnQudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYXJjLWNoYXJ0LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQXJjQ2hhcnRDb21wb25lbnQge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgYXJjcyQgPSBuZXcgUmVwbGF5U3ViamVjdDxRdWVyeUxpc3Q8RWxlbWVudFJlZjxTVkdFbGVtZW50Pj4+KDEpO1xuXG4gICAgQFZpZXdDaGlsZHJlbignYXJjJylcbiAgICBzZXQgYXJjcyhhcmNzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZjxTVkdFbGVtZW50Pj4pIHtcbiAgICAgICAgdGhpcy5hcmNzJC5uZXh0KGFyY3MpO1xuICAgIH1cblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICB2YWx1ZTogcmVhZG9ubHkgbnVtYmVyW10gPSBbXTtcblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtc2l6ZScpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBzaXplOiBUdWlTaXplWEwgPSAnbSc7XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgbWF4ID0gMTAwO1xuXG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIG1pbkxhYmVsID0gJzAlJztcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBtYXhMYWJlbCA9ICcxMDAlJztcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBhY3RpdmVJdGVtSW5kZXggPSBOYU47XG5cbiAgICBAT3V0cHV0KClcbiAgICByZWFkb25seSBhY3RpdmVJdGVtSW5kZXhDaGFuZ2UgPSB0aGlzLmFyY3MkLnBpcGUoXG4gICAgICAgIHN3aXRjaE1hcChhcmNzID0+XG4gICAgICAgICAgICBhcmNzLmNoYW5nZXMucGlwZShcbiAgICAgICAgICAgICAgICBzdGFydFdpdGgobnVsbCksXG4gICAgICAgICAgICAgICAgc3dpdGNoTWFwKCgpID0+IG1lcmdlKC4uLmFyY3NUb0luZGV4KGFyY3MpKSksXG4gICAgICAgICAgICApLFxuICAgICAgICApLFxuICAgICAgICB0YXAoaW5kZXggPT4ge1xuICAgICAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXggPSBpbmRleDtcbiAgICAgICAgfSksXG4gICAgKTtcblxuICAgIGluaXRpYWxpemVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChEb21TYW5pdGl6ZXIpIHByaXZhdGUgcmVhZG9ubHkgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIsXG4gICAgICAgIEBJbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICApIHtcbiAgICAgICAgLy8gU28gaW5pdGlhbCBhbmltYXRpb24gd29ya3NcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLmluaXRpYWxpemVkID0gdHJ1ZTtcbiAgICAgICAgICAgIGNoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLndpZHRoLnJlbScpXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5oZWlnaHQucmVtJylcbiAgICBnZXQgd2lkdGgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIFNJWkVbdGhpcy5zaXplXTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLnN0cm9rZVdpZHRoLnJlbScpXG4gICAgZ2V0IHN0cm9rZVdpZHRoKCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBXSURUSFt0aGlzLnNpemVdO1xuICAgIH1cblxuICAgIGlzSW5hY3RpdmUoaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gIWlzTmFOKHRoaXMuYWN0aXZlSXRlbUluZGV4KSAmJiBpbmRleCAhPT0gdGhpcy5hY3RpdmVJdGVtSW5kZXg7XG4gICAgfVxuXG4gICAgZ2V0SW5zZXQoaW5kZXg6IG51bWJlcik6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLnN0cm9rZVdpZHRoIC8gMiArIGluZGV4ICogKHRoaXMuc3Ryb2tlV2lkdGggKyBHQVBbdGhpcy5zaXplXSk7XG4gICAgfVxuXG4gICAgZ2V0RGlhbWV0ZXIoaW5kZXg6IG51bWJlcik6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBTSVpFW3RoaXMuc2l6ZV0gLSAyICogdGhpcy5nZXRJbnNldChpbmRleCk7XG4gICAgfVxuXG4gICAgZ2V0TGVuZ3RoKGluZGV4OiBudW1iZXIpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gTWF0aC5QSSAqIHRoaXMuZ2V0RGlhbWV0ZXIoaW5kZXgpICogQVJDO1xuICAgIH1cblxuICAgIGdldE9mZnNldChpbmRleDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZ2V0TGVuZ3RoKGluZGV4KSAqICgxIC0gTWF0aC5taW4odGhpcy52YWx1ZVtpbmRleF0gLyB0aGlzLm1heCwgMSkpO1xuICAgIH1cblxuICAgIGdldENvbG9yKGluZGV4OiBudW1iZXIpOiBTYWZlVmFsdWUge1xuICAgICAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFN0eWxlKFxuICAgICAgICAgICAgYHZhcigtLXR1aS1jaGFydC0ke2luZGV4fSwgdmFyKC0tdHVpLXN1cHBvcnQtMCR7aW5kZXggKyAxfSkpYCxcbiAgICAgICAgKTtcbiAgICB9XG59XG5cbmZ1bmN0aW9uIGFyY3NUb0luZGV4KGFyY3M6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPFNWR0VsZW1lbnQ+Pik6IEFycmF5PE9ic2VydmFibGU8bnVtYmVyPj4ge1xuICAgIHJldHVybiBhcmNzXG4gICAgICAgIC50b0FycmF5KClcbiAgICAgICAgLm1hcCgoe25hdGl2ZUVsZW1lbnR9LCBpbmRleCkgPT5cbiAgICAgICAgICAgIG1lcmdlKFxuICAgICAgICAgICAgICAgIHR5cGVkRnJvbUV2ZW50KG5hdGl2ZUVsZW1lbnQsICdtb3VzZWVudGVyJykucGlwZShtYXBUbyhpbmRleCkpLFxuICAgICAgICAgICAgICAgIHR5cGVkRnJvbUV2ZW50KG5hdGl2ZUVsZW1lbnQsICdtb3VzZWxlYXZlJykucGlwZShtYXBUbyhOYU4pKSxcbiAgICAgICAgICAgICksXG4gICAgICAgICk7XG59XG4iXX0=
package/esm5/components/line-chart/line-chart.component.js CHANGED
@@ -231,7 +231,7 @@ var TuiLineChartComponent = /** @class */ (function () {
231
231
  selector: 'tui-line-chart',
232
232
  template: "<ng-container *tuiLet=\"hovered$ | async as hovered\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n preserveAspectRatio=\"none\"\n width=\"100%\"\n height=\"100%\"\n class=\"t-svg\"\n [attr.viewBox]=\"viewBox\"\n >\n <defs>\n <linearGradient\n x1=\"0\"\n x2=\"0\"\n y1=\"1\"\n y2=\"0\"\n [attr.id]=\"fillId\"\n >\n <stop\n stop-color=\"currentColor\"\n offset=\"0%\"\n stop-opacity=\"0.5\"\n />\n <stop\n stop-color=\"currentColor\"\n offset=\"100%\"\n stop-opacity=\"0\"\n />\n </linearGradient>\n </defs>\n <path\n stroke=\"none\"\n [attr.fill]=\"fill\"\n [attr.d]=\"fillD\"\n />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n vector-effect=\"non-scaling-stroke\"\n stroke-width=\"2\"\n [attr.d]=\"d\"\n />\n </svg>\n <ng-container *ngIf=\"dots\">\n <div\n *ngFor=\"let point of value\"\n class=\"t-dot\"\n [style.left.%]=\"getLeft(point[0])\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n </ng-container>\n <ng-container *ngIf=\"hasHints\">\n <ng-container *ngFor=\"let point of value; let index = index\">\n <div\n *ngIf=\"value.length > 1 || dots\"\n tuiHintDirection=\"top-left\"\n class=\"t-column\"\n [class.t-column_hovered]=\"hovered === index\"\n [tuiHintHost]=\"hintHost\"\n [tuiHint]=\"hintDirective || hintContent ? hint : ''\"\n [tuiHintId]=\"getHintId(index)\"\n [style.left.%]=\"getLeft(getX(index))\"\n [style.width.%]=\"getWidth(index)\"\n (mouseenter)=\"onMouseEnter(index)\"\n >\n <div\n class=\"t-line t-line_vertical\"\n [style.left.%]=\"getOffset(index)\"\n ></div>\n <div\n #hintHost\n class=\"t-host\"\n [style.left.%]=\"getOffset(index)\"\n [style.bottom.%]=\"getBottom(point[1])\"\n [tuiFocusable]=\"isFocusable\"\n [tuiDescribedBy]=\"getHintId(index)\"\n ></div>\n </div>\n <div\n *ngIf=\"isFocusable\"\n class=\"t-line t-line_horizontal\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n <ng-template #hint>\n <div\n *ngIf=\"hintDirective else single\"\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintDirective.hint\"\n [context]=\"getContentContext(point, index)\"\n ></div>\n <ng-template #single>\n <div\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintContent\"\n [context]=\"{ $implicit: point, index: index }\"\n ></div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"getHovered(hovered) as point\">\n <div\n *ngIf=\"xStringify\"\n class=\"t-hint t-hint_x\"\n [style.left.%]=\"getLeft(point[0])\"\n >\n {{ xStringify(point[0]) }}\n </div>\n <div\n *ngIf=\"yStringify\"\n class=\"t-hint t-hint_y\"\n [style.bottom.%]=\"getBottom(point[1])\"\n >\n {{ yStringify(point[1]) }}\n </div>\n </ng-container>\n</ng-container>\n",
233
233
  changeDetection: ChangeDetectionStrategy.OnPush,
234
- styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.column._hint_hovered .t-host,.column:hover .t-host,.column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .column._hint_hovered .t-line,:host:not([style]) .column._hint_hovered+.t-line,:host:not([style]) .column:hover .t-line,:host:not([style]) .column:hover+.t-line,:host[style^='z-index: 0'] .column_hovered .t-line,:host[style^='z-index: 0'] .column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
234
+ styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.t-column._hint_hovered .t-host,.t-column:hover .t-host,.t-column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .t-column._hint_hovered .t-line,:host:not([style]) .t-column._hint_hovered+.t-line,:host:not([style]) .t-column:hover .t-line,:host:not([style]) .t-column:hover+.t-line,:host[style^='z-index: 0'] .t-column_hovered .t-line,:host[style^='z-index: 0'] .t-column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
235
235
  }),
236
236
  __param(0, Inject(TuiIdService)),
237
237
  __param(1, Inject(NgZone)),
package/fesm2015/taiga-ui-addon-charts-components-arc-chart.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { __decorate, __param } from 'tslib';
2
- import { Inject, ChangeDetectorRef, Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
2
+ import { Inject, ChangeDetectorRef, ViewChildren, Input, HostBinding, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
3
3
  import { DomSanitizer } from '@angular/platform-browser';
4
- import { tuiDefaultProp, TuiRepeatTimesModule } from '@taiga-ui/cdk';
4
+ import { typedFromEvent, tuiDefaultProp, TuiRepeatTimesModule } from '@taiga-ui/cdk';
5
+ import { ReplaySubject, merge } from 'rxjs';
6
+ import { switchMap, startWith, mapTo, tap } from 'rxjs/operators';
5
7
 
6
8
  // 3/4 with 1% safety offset
7
9
  const ARC = 0.76;
@@ -23,11 +25,16 @@ const GAP = {
23
25
  let TuiArcChartComponent = class TuiArcChartComponent {
24
26
  constructor(sanitizer, changeDetectorRef) {
25
27
  this.sanitizer = sanitizer;
28
+ this.arcs$ = new ReplaySubject(1);
26
29
  this.value = [];
27
30
  this.size = 'm';
28
31
  this.max = 100;
29
32
  this.minLabel = '0%';
30
33
  this.maxLabel = '100%';
34
+ this.activeItemIndex = NaN;
35
+ this.activeItemIndexChange = this.arcs$.pipe(switchMap(arcs => arcs.changes.pipe(startWith(null), switchMap(() => merge(...arcsToIndex(arcs))))), tap(index => {
36
+ this.activeItemIndex = index;
37
+ }));
31
38
  this.initialized = false;
32
39
  // So initial animation works
33
40
  setTimeout(() => {
@@ -35,12 +42,18 @@ let TuiArcChartComponent = class TuiArcChartComponent {
35
42
  changeDetectorRef.markForCheck();
36
43
  });
37
44
  }
45
+ set arcs(arcs) {
46
+ this.arcs$.next(arcs);
47
+ }
38
48
  get width() {
39
49
  return SIZE[this.size];
40
50
  }
41
51
  get strokeWidth() {
42
52
  return WIDTH[this.size];
43
53
  }
54
+ isInactive(index) {
55
+ return !isNaN(this.activeItemIndex) && index !== this.activeItemIndex;
56
+ }
44
57
  getInset(index) {
45
58
  return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);
46
59
  }
@@ -61,6 +74,9 @@ TuiArcChartComponent.ctorParameters = () => [
61
74
  { type: DomSanitizer, decorators: [{ type: Inject, args: [DomSanitizer,] }] },
62
75
  { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
63
76
  ];
77
+ __decorate([
78
+ ViewChildren('arc')
79
+ ], TuiArcChartComponent.prototype, "arcs", null);
64
80
  __decorate([
65
81
  Input(),
66
82
  tuiDefaultProp()
@@ -82,6 +98,13 @@ __decorate([
82
98
  Input(),
83
99
  tuiDefaultProp()
84
100
  ], TuiArcChartComponent.prototype, "maxLabel", void 0);
101
+ __decorate([
102
+ Input(),
103
+ tuiDefaultProp()
104
+ ], TuiArcChartComponent.prototype, "activeItemIndex", void 0);
105
+ __decorate([
106
+ Output()
107
+ ], TuiArcChartComponent.prototype, "activeItemIndexChange", void 0);
85
108
  __decorate([
86
109
  HostBinding('style.width.rem'),
87
110
  HostBinding('style.height.rem')
@@ -92,13 +115,18 @@ __decorate([
92
115
  TuiArcChartComponent = __decorate([
93
116
  Component({
94
117
  selector: 'tui-arc-chart',
95
- template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
118
+ template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n #arc\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [class.t-value_inactive]=\"isInactive(index)\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
96
119
  changeDetection: ChangeDetectionStrategy.OnPush,
97
- styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem}.t-value{transition-property:stroke-dashoffset;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs)}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{flex:1}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
120
+ styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem;pointer-events:none}.t-value{pointer-events:auto;transition:stroke-dashoffset var(--tui-duration) ease-in-out,opacity var(--tui-duration) ease-in-out .1s}.t-value_inactive{transition-property:stroke-dashoffset,opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;opacity:.16}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs);pointer-events:none}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{pointer-events:auto}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
98
121
  }),
99
122
  __param(0, Inject(DomSanitizer)),
100
123
  __param(1, Inject(ChangeDetectorRef))
101
124
  ], TuiArcChartComponent);
125
+ function arcsToIndex(arcs) {
126
+ return arcs
127
+ .toArray()
128
+ .map(({ nativeElement }, index) => merge(typedFromEvent(nativeElement, 'mouseenter').pipe(mapTo(index)), typedFromEvent(nativeElement, 'mouseleave').pipe(mapTo(NaN))));
129
+ }
102
130
 
103
131
  let TuiArcChartModule = class TuiArcChartModule {
104
132
  };
package/fesm2015/taiga-ui-addon-charts-components-arc-chart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"taiga-ui-addon-charts-components-arc-chart.js","sources":["ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.component.ts","ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.module.ts","ng://@taiga-ui/addon-charts/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n} from '@angular/core';\nimport {DomSanitizer, SafeValue} from '@angular/platform-browser';\nimport {tuiDefaultProp} from '@taiga-ui/cdk';\nimport {TuiSizeXL} from '@taiga-ui/core';\n\n// 3/4 with 1% safety offset\nconst ARC = 0.76;\n\nconst SIZE: Record<TuiSizeXL, number> = {\n m: 9,\n l: 11,\n xl: 16,\n};\n\nconst WIDTH: Record<TuiSizeXL, number> = {\n m: 0.25,\n l: 0.375,\n xl: 0.5625,\n};\n\nconst GAP: Record<TuiSizeXL, number> = {\n m: 0.125,\n l: 0.1875,\n xl: 0.25,\n};\n\n@Component({\n selector: 'tui-arc-chart',\n templateUrl: './arc-chart.template.html',\n styleUrls: ['./arc-chart.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiArcChartComponent {\n @Input()\n @tuiDefaultProp()\n value: readonly number[] = [];\n\n @Input()\n @HostBinding('attr.data-size')\n @tuiDefaultProp()\n size: TuiSizeXL = 'm';\n\n @Input()\n @tuiDefaultProp()\n max = 100;\n\n @Input()\n @tuiDefaultProp()\n minLabel = '0%';\n\n @Input()\n @tuiDefaultProp()\n maxLabel = '100%';\n\n initialized = false;\n\n constructor(\n @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,\n @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n ) {\n // So initial animation works\n setTimeout(() => {\n this.initialized = true;\n changeDetectorRef.markForCheck();\n });\n }\n\n @HostBinding('style.width.rem')\n @HostBinding('style.height.rem')\n get width(): number {\n return SIZE[this.size];\n }\n\n @HostBinding('style.strokeWidth.rem')\n get strokeWidth(): number {\n return WIDTH[this.size];\n }\n\n getInset(index: number): number {\n return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);\n }\n\n getDiameter(index: number): number {\n return SIZE[this.size] - 2 * this.getInset(index);\n }\n\n getLength(index: number): number {\n return Math.PI * this.getDiameter(index) * ARC;\n }\n\n getOffset(index: number): number {\n return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));\n }\n\n getColor(index: number): SafeValue {\n return this.sanitizer.bypassSecurityTrustStyle(\n `var(--tui-chart-${index}, var(--tui-support-0${index + 1}))`,\n );\n }\n}\n","import {NgModule} from '@angular/core';\nimport {TuiRepeatTimesModule} from '@taiga-ui/cdk';\n\nimport {TuiArcChartComponent} from './arc-chart.component';\n\n@NgModule({\n imports: [TuiRepeatTimesModule],\n declarations: [TuiArcChartComponent],\n exports: [TuiArcChartComponent],\n})\nexport class TuiArcChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"taiga-ui-addon-charts-components-arc-chart.js","sources":["ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.component.ts","ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.module.ts","ng://@taiga-ui/addon-charts/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Output,\n QueryList,\n ViewChildren,\n} from '@angular/core';\nimport {DomSanitizer, SafeValue} from '@angular/platform-browser';\nimport {tuiDefaultProp, typedFromEvent} from '@taiga-ui/cdk';\nimport {TuiSizeXL} from '@taiga-ui/core';\nimport {merge, Observable, ReplaySubject} from 'rxjs';\nimport {mapTo, startWith, switchMap, tap} from 'rxjs/operators';\n\n// 3/4 with 1% safety offset\nconst ARC = 0.76;\n\nconst SIZE: Record<TuiSizeXL, number> = {\n m: 9,\n l: 11,\n xl: 16,\n};\n\nconst WIDTH: Record<TuiSizeXL, number> = {\n m: 0.25,\n l: 0.375,\n xl: 0.5625,\n};\n\nconst GAP: Record<TuiSizeXL, number> = {\n m: 0.125,\n l: 0.1875,\n xl: 0.25,\n};\n\n@Component({\n selector: 'tui-arc-chart',\n templateUrl: './arc-chart.template.html',\n styleUrls: ['./arc-chart.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiArcChartComponent {\n private readonly arcs$ = new ReplaySubject<QueryList<ElementRef<SVGElement>>>(1);\n\n @ViewChildren('arc')\n set arcs(arcs: QueryList<ElementRef<SVGElement>>) {\n this.arcs$.next(arcs);\n }\n\n @Input()\n @tuiDefaultProp()\n value: readonly number[] = [];\n\n @Input()\n @HostBinding('attr.data-size')\n @tuiDefaultProp()\n size: TuiSizeXL = 'm';\n\n @Input()\n @tuiDefaultProp()\n max = 100;\n\n @Input()\n @tuiDefaultProp()\n minLabel = '0%';\n\n @Input()\n @tuiDefaultProp()\n maxLabel = '100%';\n\n @Input()\n @tuiDefaultProp()\n activeItemIndex = NaN;\n\n @Output()\n readonly activeItemIndexChange = this.arcs$.pipe(\n switchMap(arcs =>\n arcs.changes.pipe(\n startWith(null),\n switchMap(() => merge(...arcsToIndex(arcs))),\n ),\n ),\n tap(index => {\n this.activeItemIndex = index;\n }),\n );\n\n initialized = false;\n\n constructor(\n @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,\n @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n ) {\n // So initial animation works\n setTimeout(() => {\n this.initialized = true;\n changeDetectorRef.markForCheck();\n });\n }\n\n @HostBinding('style.width.rem')\n @HostBinding('style.height.rem')\n get width(): number {\n return SIZE[this.size];\n }\n\n @HostBinding('style.strokeWidth.rem')\n get strokeWidth(): number {\n return WIDTH[this.size];\n }\n\n isInactive(index: number): boolean {\n return !isNaN(this.activeItemIndex) && index !== this.activeItemIndex;\n }\n\n getInset(index: number): number {\n return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);\n }\n\n getDiameter(index: number): number {\n return SIZE[this.size] - 2 * this.getInset(index);\n }\n\n getLength(index: number): number {\n return Math.PI * this.getDiameter(index) * ARC;\n }\n\n getOffset(index: number): number {\n return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));\n }\n\n getColor(index: number): SafeValue {\n return this.sanitizer.bypassSecurityTrustStyle(\n `var(--tui-chart-${index}, var(--tui-support-0${index + 1}))`,\n );\n }\n}\n\nfunction arcsToIndex(arcs: QueryList<ElementRef<SVGElement>>): Array<Observable<number>> {\n return arcs\n .toArray()\n .map(({nativeElement}, index) =>\n merge(\n typedFromEvent(nativeElement, 'mouseenter').pipe(mapTo(index)),\n typedFromEvent(nativeElement, 'mouseleave').pipe(mapTo(NaN)),\n ),\n );\n}\n","import {NgModule} from '@angular/core';\nimport {TuiRepeatTimesModule} from '@taiga-ui/cdk';\n\nimport {TuiArcChartComponent} from './arc-chart.component';\n\n@NgModule({\n imports: [TuiRepeatTimesModule],\n declarations: [TuiArcChartComponent],\n exports: [TuiArcChartComponent],\n})\nexport class TuiArcChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2015/taiga-ui-addon-charts-components-line-chart.js CHANGED
@@ -255,7 +255,7 @@ TuiLineChartComponent = __decorate([
255
255
  selector: 'tui-line-chart',
256
256
  template: "<ng-container *tuiLet=\"hovered$ | async as hovered\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n preserveAspectRatio=\"none\"\n width=\"100%\"\n height=\"100%\"\n class=\"t-svg\"\n [attr.viewBox]=\"viewBox\"\n >\n <defs>\n <linearGradient\n x1=\"0\"\n x2=\"0\"\n y1=\"1\"\n y2=\"0\"\n [attr.id]=\"fillId\"\n >\n <stop\n stop-color=\"currentColor\"\n offset=\"0%\"\n stop-opacity=\"0.5\"\n />\n <stop\n stop-color=\"currentColor\"\n offset=\"100%\"\n stop-opacity=\"0\"\n />\n </linearGradient>\n </defs>\n <path\n stroke=\"none\"\n [attr.fill]=\"fill\"\n [attr.d]=\"fillD\"\n />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n vector-effect=\"non-scaling-stroke\"\n stroke-width=\"2\"\n [attr.d]=\"d\"\n />\n </svg>\n <ng-container *ngIf=\"dots\">\n <div\n *ngFor=\"let point of value\"\n class=\"t-dot\"\n [style.left.%]=\"getLeft(point[0])\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n </ng-container>\n <ng-container *ngIf=\"hasHints\">\n <ng-container *ngFor=\"let point of value; let index = index\">\n <div\n *ngIf=\"value.length > 1 || dots\"\n tuiHintDirection=\"top-left\"\n class=\"t-column\"\n [class.t-column_hovered]=\"hovered === index\"\n [tuiHintHost]=\"hintHost\"\n [tuiHint]=\"hintDirective || hintContent ? hint : ''\"\n [tuiHintId]=\"getHintId(index)\"\n [style.left.%]=\"getLeft(getX(index))\"\n [style.width.%]=\"getWidth(index)\"\n (mouseenter)=\"onMouseEnter(index)\"\n >\n <div\n class=\"t-line t-line_vertical\"\n [style.left.%]=\"getOffset(index)\"\n ></div>\n <div\n #hintHost\n class=\"t-host\"\n [style.left.%]=\"getOffset(index)\"\n [style.bottom.%]=\"getBottom(point[1])\"\n [tuiFocusable]=\"isFocusable\"\n [tuiDescribedBy]=\"getHintId(index)\"\n ></div>\n </div>\n <div\n *ngIf=\"isFocusable\"\n class=\"t-line t-line_horizontal\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n <ng-template #hint>\n <div\n *ngIf=\"hintDirective else single\"\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintDirective.hint\"\n [context]=\"getContentContext(point, index)\"\n ></div>\n <ng-template #single>\n <div\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintContent\"\n [context]=\"{ $implicit: point, index: index }\"\n ></div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"getHovered(hovered) as point\">\n <div\n *ngIf=\"xStringify\"\n class=\"t-hint t-hint_x\"\n [style.left.%]=\"getLeft(point[0])\"\n >\n {{ xStringify(point[0]) }}\n </div>\n <div\n *ngIf=\"yStringify\"\n class=\"t-hint t-hint_y\"\n [style.bottom.%]=\"getBottom(point[1])\"\n >\n {{ yStringify(point[1]) }}\n </div>\n </ng-container>\n</ng-container>\n",
257
257
  changeDetection: ChangeDetectionStrategy.OnPush,
258
- styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.column._hint_hovered .t-host,.column:hover .t-host,.column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .column._hint_hovered .t-line,:host:not([style]) .column._hint_hovered+.t-line,:host:not([style]) .column:hover .t-line,:host:not([style]) .column:hover+.t-line,:host[style^='z-index: 0'] .column_hovered .t-line,:host[style^='z-index: 0'] .column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
258
+ styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.t-column._hint_hovered .t-host,.t-column:hover .t-host,.t-column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .t-column._hint_hovered .t-line,:host:not([style]) .t-column._hint_hovered+.t-line,:host:not([style]) .t-column:hover .t-line,:host:not([style]) .t-column:hover+.t-line,:host[style^='z-index: 0'] .t-column_hovered .t-line,:host[style^='z-index: 0'] .t-column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
259
259
  }),
260
260
  __param(0, Inject(TuiIdService)),
261
261
  __param(1, Inject(NgZone)),
package/fesm5/taiga-ui-addon-charts-components-arc-chart.js CHANGED
@@ -1,7 +1,9 @@
1
- import { __decorate, __param } from 'tslib';
2
- import { Inject, ChangeDetectorRef, Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
1
+ import { __spread, __decorate, __param } from 'tslib';
2
+ import { Inject, ChangeDetectorRef, ViewChildren, Input, HostBinding, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
3
3
  import { DomSanitizer } from '@angular/platform-browser';
4
- import { tuiDefaultProp, TuiRepeatTimesModule } from '@taiga-ui/cdk';
4
+ import { typedFromEvent, tuiDefaultProp, TuiRepeatTimesModule } from '@taiga-ui/cdk';
5
+ import { ReplaySubject, merge } from 'rxjs';
6
+ import { switchMap, startWith, mapTo, tap } from 'rxjs/operators';
5
7
 
6
8
  // 3/4 with 1% safety offset
7
9
  var ARC = 0.76;
@@ -24,11 +26,18 @@ var TuiArcChartComponent = /** @class */ (function () {
24
26
  function TuiArcChartComponent(sanitizer, changeDetectorRef) {
25
27
  var _this = this;
26
28
  this.sanitizer = sanitizer;
29
+ this.arcs$ = new ReplaySubject(1);
27
30
  this.value = [];
28
31
  this.size = 'm';
29
32
  this.max = 100;
30
33
  this.minLabel = '0%';
31
34
  this.maxLabel = '100%';
35
+ this.activeItemIndex = NaN;
36
+ this.activeItemIndexChange = this.arcs$.pipe(switchMap(function (arcs) {
37
+ return arcs.changes.pipe(startWith(null), switchMap(function () { return merge.apply(void 0, __spread(arcsToIndex(arcs))); }));
38
+ }), tap(function (index) {
39
+ _this.activeItemIndex = index;
40
+ }));
32
41
  this.initialized = false;
33
42
  // So initial animation works
34
43
  setTimeout(function () {
@@ -36,6 +45,13 @@ var TuiArcChartComponent = /** @class */ (function () {
36
45
  changeDetectorRef.markForCheck();
37
46
  });
38
47
  }
48
+ Object.defineProperty(TuiArcChartComponent.prototype, "arcs", {
49
+ set: function (arcs) {
50
+ this.arcs$.next(arcs);
51
+ },
52
+ enumerable: true,
53
+ configurable: true
54
+ });
39
55
  Object.defineProperty(TuiArcChartComponent.prototype, "width", {
40
56
  get: function () {
41
57
  return SIZE[this.size];
@@ -50,6 +66,9 @@ var TuiArcChartComponent = /** @class */ (function () {
50
66
  enumerable: true,
51
67
  configurable: true
52
68
  });
69
+ TuiArcChartComponent.prototype.isInactive = function (index) {
70
+ return !isNaN(this.activeItemIndex) && index !== this.activeItemIndex;
71
+ };
53
72
  TuiArcChartComponent.prototype.getInset = function (index) {
54
73
  return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);
55
74
  };
@@ -69,6 +88,9 @@ var TuiArcChartComponent = /** @class */ (function () {
69
88
  { type: DomSanitizer, decorators: [{ type: Inject, args: [DomSanitizer,] }] },
70
89
  { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
71
90
  ]; };
91
+ __decorate([
92
+ ViewChildren('arc')
93
+ ], TuiArcChartComponent.prototype, "arcs", null);
72
94
  __decorate([
73
95
  Input(),
74
96
  tuiDefaultProp()
@@ -90,6 +112,13 @@ var TuiArcChartComponent = /** @class */ (function () {
90
112
  Input(),
91
113
  tuiDefaultProp()
92
114
  ], TuiArcChartComponent.prototype, "maxLabel", void 0);
115
+ __decorate([
116
+ Input(),
117
+ tuiDefaultProp()
118
+ ], TuiArcChartComponent.prototype, "activeItemIndex", void 0);
119
+ __decorate([
120
+ Output()
121
+ ], TuiArcChartComponent.prototype, "activeItemIndexChange", void 0);
93
122
  __decorate([
94
123
  HostBinding('style.width.rem'),
95
124
  HostBinding('style.height.rem')
@@ -100,15 +129,23 @@ var TuiArcChartComponent = /** @class */ (function () {
100
129
  TuiArcChartComponent = __decorate([
101
130
  Component({
102
131
  selector: 'tui-arc-chart',
103
- template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
132
+ template: "<svg\n *tuiRepeatTimes=\"let index of value.length\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-100 -100 200 200\"\n focusable=\"false\"\n class=\"t-svg\"\n [style.top.em]=\"getInset(index)\"\n [style.left.em]=\"getInset(index)\"\n [style.width.em]=\"getDiameter(index)\"\n [style.height.em]=\"getDiameter(index)\"\n>\n <path\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n />\n <path\n #arc\n vector-effect=\"non-scaling-stroke\"\n d=\"M -70 70 A 100 100 0 1 1 70 70\"\n class=\"t-value\"\n [class.t-value_inactive]=\"isInactive(index)\"\n [style.stroke]=\"getColor(index)\"\n [style.strokeDasharray.em]=\"getLength(index)\"\n [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n />\n</svg>\n<div class=\"t-content\">\n <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n <span>{{minLabel}}</span>\n <span>{{maxLabel}}</span>\n</div>\n",
104
133
  changeDetection: ChangeDetectionStrategy.OnPush,
105
- styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem}.t-value{transition-property:stroke-dashoffset;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs)}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{flex:1}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
134
+ styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem;pointer-events:none}.t-value{pointer-events:auto;transition:stroke-dashoffset var(--tui-duration) ease-in-out,opacity var(--tui-duration) ease-in-out .1s}.t-value_inactive{transition-property:stroke-dashoffset,opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;opacity:.16}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs);pointer-events:none}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{pointer-events:auto}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
106
135
  }),
107
136
  __param(0, Inject(DomSanitizer)),
108
137
  __param(1, Inject(ChangeDetectorRef))
109
138
  ], TuiArcChartComponent);
110
139
  return TuiArcChartComponent;
111
140
  }());
141
+ function arcsToIndex(arcs) {
142
+ return arcs
143
+ .toArray()
144
+ .map(function (_a, index) {
145
+ var nativeElement = _a.nativeElement;
146
+ return merge(typedFromEvent(nativeElement, 'mouseenter').pipe(mapTo(index)), typedFromEvent(nativeElement, 'mouseleave').pipe(mapTo(NaN)));
147
+ });
148
+ }
112
149
 
113
150
  var TuiArcChartModule = /** @class */ (function () {
114
151
  function TuiArcChartModule() {
package/fesm5/taiga-ui-addon-charts-components-arc-chart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"taiga-ui-addon-charts-components-arc-chart.js","sources":["ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.component.ts","ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.module.ts","ng://@taiga-ui/addon-charts/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n} from '@angular/core';\nimport {DomSanitizer, SafeValue} from '@angular/platform-browser';\nimport {tuiDefaultProp} from '@taiga-ui/cdk';\nimport {TuiSizeXL} from '@taiga-ui/core';\n\n// 3/4 with 1% safety offset\nconst ARC = 0.76;\n\nconst SIZE: Record<TuiSizeXL, number> = {\n m: 9,\n l: 11,\n xl: 16,\n};\n\nconst WIDTH: Record<TuiSizeXL, number> = {\n m: 0.25,\n l: 0.375,\n xl: 0.5625,\n};\n\nconst GAP: Record<TuiSizeXL, number> = {\n m: 0.125,\n l: 0.1875,\n xl: 0.25,\n};\n\n@Component({\n selector: 'tui-arc-chart',\n templateUrl: './arc-chart.template.html',\n styleUrls: ['./arc-chart.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiArcChartComponent {\n @Input()\n @tuiDefaultProp()\n value: readonly number[] = [];\n\n @Input()\n @HostBinding('attr.data-size')\n @tuiDefaultProp()\n size: TuiSizeXL = 'm';\n\n @Input()\n @tuiDefaultProp()\n max = 100;\n\n @Input()\n @tuiDefaultProp()\n minLabel = '0%';\n\n @Input()\n @tuiDefaultProp()\n maxLabel = '100%';\n\n initialized = false;\n\n constructor(\n @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,\n @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n ) {\n // So initial animation works\n setTimeout(() => {\n this.initialized = true;\n changeDetectorRef.markForCheck();\n });\n }\n\n @HostBinding('style.width.rem')\n @HostBinding('style.height.rem')\n get width(): number {\n return SIZE[this.size];\n }\n\n @HostBinding('style.strokeWidth.rem')\n get strokeWidth(): number {\n return WIDTH[this.size];\n }\n\n getInset(index: number): number {\n return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);\n }\n\n getDiameter(index: number): number {\n return SIZE[this.size] - 2 * this.getInset(index);\n }\n\n getLength(index: number): number {\n return Math.PI * this.getDiameter(index) * ARC;\n }\n\n getOffset(index: number): number {\n return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));\n }\n\n getColor(index: number): SafeValue {\n return this.sanitizer.bypassSecurityTrustStyle(\n `var(--tui-chart-${index}, var(--tui-support-0${index + 1}))`,\n );\n }\n}\n","import {NgModule} from '@angular/core';\nimport {TuiRepeatTimesModule} from '@taiga-ui/cdk';\n\nimport {TuiArcChartComponent} from './arc-chart.component';\n\n@NgModule({\n imports: [TuiRepeatTimesModule],\n declarations: [TuiArcChartComponent],\n exports: [TuiArcChartComponent],\n})\nexport class TuiArcChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"taiga-ui-addon-charts-components-arc-chart.js","sources":["ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.component.ts","ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.module.ts","ng://@taiga-ui/addon-charts/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n HostBinding,\n Inject,\n Input,\n Output,\n QueryList,\n ViewChildren,\n} from '@angular/core';\nimport {DomSanitizer, SafeValue} from '@angular/platform-browser';\nimport {tuiDefaultProp, typedFromEvent} from '@taiga-ui/cdk';\nimport {TuiSizeXL} from '@taiga-ui/core';\nimport {merge, Observable, ReplaySubject} from 'rxjs';\nimport {mapTo, startWith, switchMap, tap} from 'rxjs/operators';\n\n// 3/4 with 1% safety offset\nconst ARC = 0.76;\n\nconst SIZE: Record<TuiSizeXL, number> = {\n m: 9,\n l: 11,\n xl: 16,\n};\n\nconst WIDTH: Record<TuiSizeXL, number> = {\n m: 0.25,\n l: 0.375,\n xl: 0.5625,\n};\n\nconst GAP: Record<TuiSizeXL, number> = {\n m: 0.125,\n l: 0.1875,\n xl: 0.25,\n};\n\n@Component({\n selector: 'tui-arc-chart',\n templateUrl: './arc-chart.template.html',\n styleUrls: ['./arc-chart.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiArcChartComponent {\n private readonly arcs$ = new ReplaySubject<QueryList<ElementRef<SVGElement>>>(1);\n\n @ViewChildren('arc')\n set arcs(arcs: QueryList<ElementRef<SVGElement>>) {\n this.arcs$.next(arcs);\n }\n\n @Input()\n @tuiDefaultProp()\n value: readonly number[] = [];\n\n @Input()\n @HostBinding('attr.data-size')\n @tuiDefaultProp()\n size: TuiSizeXL = 'm';\n\n @Input()\n @tuiDefaultProp()\n max = 100;\n\n @Input()\n @tuiDefaultProp()\n minLabel = '0%';\n\n @Input()\n @tuiDefaultProp()\n maxLabel = '100%';\n\n @Input()\n @tuiDefaultProp()\n activeItemIndex = NaN;\n\n @Output()\n readonly activeItemIndexChange = this.arcs$.pipe(\n switchMap(arcs =>\n arcs.changes.pipe(\n startWith(null),\n switchMap(() => merge(...arcsToIndex(arcs))),\n ),\n ),\n tap(index => {\n this.activeItemIndex = index;\n }),\n );\n\n initialized = false;\n\n constructor(\n @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,\n @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n ) {\n // So initial animation works\n setTimeout(() => {\n this.initialized = true;\n changeDetectorRef.markForCheck();\n });\n }\n\n @HostBinding('style.width.rem')\n @HostBinding('style.height.rem')\n get width(): number {\n return SIZE[this.size];\n }\n\n @HostBinding('style.strokeWidth.rem')\n get strokeWidth(): number {\n return WIDTH[this.size];\n }\n\n isInactive(index: number): boolean {\n return !isNaN(this.activeItemIndex) && index !== this.activeItemIndex;\n }\n\n getInset(index: number): number {\n return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);\n }\n\n getDiameter(index: number): number {\n return SIZE[this.size] - 2 * this.getInset(index);\n }\n\n getLength(index: number): number {\n return Math.PI * this.getDiameter(index) * ARC;\n }\n\n getOffset(index: number): number {\n return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));\n }\n\n getColor(index: number): SafeValue {\n return this.sanitizer.bypassSecurityTrustStyle(\n `var(--tui-chart-${index}, var(--tui-support-0${index + 1}))`,\n );\n }\n}\n\nfunction arcsToIndex(arcs: QueryList<ElementRef<SVGElement>>): Array<Observable<number>> {\n return arcs\n .toArray()\n .map(({nativeElement}, index) =>\n merge(\n typedFromEvent(nativeElement, 'mouseenter').pipe(mapTo(index)),\n typedFromEvent(nativeElement, 'mouseleave').pipe(mapTo(NaN)),\n ),\n );\n}\n","import {NgModule} from '@angular/core';\nimport {TuiRepeatTimesModule} from '@taiga-ui/cdk';\n\nimport {TuiArcChartComponent} from './arc-chart.component';\n\n@NgModule({\n imports: [TuiRepeatTimesModule],\n declarations: [TuiArcChartComponent],\n exports: [TuiArcChartComponent],\n})\nexport class TuiArcChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm5/taiga-ui-addon-charts-components-line-chart.js CHANGED
@@ -303,7 +303,7 @@ var TuiLineChartComponent = /** @class */ (function () {
303
303
  selector: 'tui-line-chart',
304
304
  template: "<ng-container *tuiLet=\"hovered$ | async as hovered\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n preserveAspectRatio=\"none\"\n width=\"100%\"\n height=\"100%\"\n class=\"t-svg\"\n [attr.viewBox]=\"viewBox\"\n >\n <defs>\n <linearGradient\n x1=\"0\"\n x2=\"0\"\n y1=\"1\"\n y2=\"0\"\n [attr.id]=\"fillId\"\n >\n <stop\n stop-color=\"currentColor\"\n offset=\"0%\"\n stop-opacity=\"0.5\"\n />\n <stop\n stop-color=\"currentColor\"\n offset=\"100%\"\n stop-opacity=\"0\"\n />\n </linearGradient>\n </defs>\n <path\n stroke=\"none\"\n [attr.fill]=\"fill\"\n [attr.d]=\"fillD\"\n />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n vector-effect=\"non-scaling-stroke\"\n stroke-width=\"2\"\n [attr.d]=\"d\"\n />\n </svg>\n <ng-container *ngIf=\"dots\">\n <div\n *ngFor=\"let point of value\"\n class=\"t-dot\"\n [style.left.%]=\"getLeft(point[0])\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n </ng-container>\n <ng-container *ngIf=\"hasHints\">\n <ng-container *ngFor=\"let point of value; let index = index\">\n <div\n *ngIf=\"value.length > 1 || dots\"\n tuiHintDirection=\"top-left\"\n class=\"t-column\"\n [class.t-column_hovered]=\"hovered === index\"\n [tuiHintHost]=\"hintHost\"\n [tuiHint]=\"hintDirective || hintContent ? hint : ''\"\n [tuiHintId]=\"getHintId(index)\"\n [style.left.%]=\"getLeft(getX(index))\"\n [style.width.%]=\"getWidth(index)\"\n (mouseenter)=\"onMouseEnter(index)\"\n >\n <div\n class=\"t-line t-line_vertical\"\n [style.left.%]=\"getOffset(index)\"\n ></div>\n <div\n #hintHost\n class=\"t-host\"\n [style.left.%]=\"getOffset(index)\"\n [style.bottom.%]=\"getBottom(point[1])\"\n [tuiFocusable]=\"isFocusable\"\n [tuiDescribedBy]=\"getHintId(index)\"\n ></div>\n </div>\n <div\n *ngIf=\"isFocusable\"\n class=\"t-line t-line_horizontal\"\n [style.bottom.%]=\"getBottom(point[1])\"\n ></div>\n <ng-template #hint>\n <div\n *ngIf=\"hintDirective else single\"\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintDirective.hint\"\n [context]=\"getContentContext(point, index)\"\n ></div>\n <ng-template #single>\n <div\n polymorpheus-outlet\n class=\"t-text\"\n [content]=\"hintContent\"\n [context]=\"{ $implicit: point, index: index }\"\n ></div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"getHovered(hovered) as point\">\n <div\n *ngIf=\"xStringify\"\n class=\"t-hint t-hint_x\"\n [style.left.%]=\"getLeft(point[0])\"\n >\n {{ xStringify(point[0]) }}\n </div>\n <div\n *ngIf=\"yStringify\"\n class=\"t-hint t-hint_y\"\n [style.bottom.%]=\"getBottom(point[1])\"\n >\n {{ yStringify(point[1]) }}\n </div>\n </ng-container>\n</ng-container>\n",
305
305
  changeDetection: ChangeDetectionStrategy.OnPush,
306
- styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.column._hint_hovered .t-host,.column:hover .t-host,.column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .column._hint_hovered .t-line,:host:not([style]) .column._hint_hovered+.t-line,:host:not([style]) .column:hover .t-line,:host:not([style]) .column:hover+.t-line,:host[style^='z-index: 0'] .column_hovered .t-line,:host[style^='z-index: 0'] .column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
306
+ styles: [":host{display:flex;width:100%;height:100%;pointer-events:none}.t-svg{transform:scale(1,-1)}.t-column{position:absolute;top:0;height:100%;pointer-events:auto}.t-dot{position:absolute;width:.375rem;height:.375rem;border-radius:100%;background:currentColor;margin:-.1875rem;box-shadow:0 0 0 2px #fff}.t-host{position:absolute;left:50%;width:.5rem;height:.5rem;border-radius:100%;opacity:0;background:#fff;margin:-.25rem;box-shadow:0 0 0 2px currentColor,0 .0625rem .1875rem .125rem rgba(0,0,0,.1);outline:0;pointer-events:none}.t-column._hint_hovered .t-host,.t-column:hover .t-host,.t-column_hovered .t-host,.t-host:focus{opacity:1}.t-line{position:absolute;opacity:0;background:var(--tui-base-03)}.t-line_vertical{top:0;bottom:0;left:50%;width:1px}.t-line_horizontal{z-index:-1;width:100%;height:1px}:host:not([style]) .t-column._hint_hovered .t-line,:host:not([style]) .t-column._hint_hovered+.t-line,:host:not([style]) .t-column:hover .t-line,:host:not([style]) .t-column:hover+.t-line,:host[style^='z-index: 0'] .t-column_hovered .t-line,:host[style^='z-index: 0'] .t-column_hovered+.t-line{opacity:1}.t-text{white-space:pre-wrap}.t-hint{box-shadow:0 .25rem 1.5rem rgba(0,0,0,.12);position:absolute;font:var(--tui-font-text-xs);height:1.25rem;line-height:1.25rem;margin-bottom:-.625rem;padding:0 .375rem;white-space:nowrap;color:var(--tui-base-09);background:var(--tui-base-01);transform:translate3d(-50%,0,0)}.t-hint_x{bottom:0}.t-hint_y{left:0}"]
307
307
  }),
308
308
  __param(0, Inject(TuiIdService)),
309
309
  __param(1, Inject(NgZone)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/addon-charts",
3
- "version": "2.44.0",
3
+ "version": "2.45.0",
4
4
  "description": "Extension package for Taiga UI that adds various charts, graphs and related components.",
5
5
  "keywords": [
6
6
  "angular",
@@ -17,8 +17,8 @@
17
17
  "@angular/common": ">=9.0.0",
18
18
  "@angular/core": ">=9.0.0",
19
19
  "@ng-web-apis/common": ">=1.12.1 < 2",
20
- "@taiga-ui/cdk": ">=2.44.0",
21
- "@taiga-ui/core": ">=2.44.0",
20
+ "@taiga-ui/cdk": ">=2.45.0",
21
+ "@taiga-ui/core": ">=2.45.0",
22
22
  "@tinkoff/ng-polymorpheus": ">=3.1.12 < 4"
23
23
  },
24
24
  "main": "bundles/taiga-ui-addon-charts.umd.js",