@skyux/charts 14.19.0 → 15.0.0-alpha.10
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/skyux-charts.mjs +128 -98
- package/fesm2022/skyux-charts.mjs.map +1 -1
- package/package.json +10 -10
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute,
|
|
2
|
+
import { input, booleanAttribute, Component, numberAttribute, inject, computed, viewChild, ElementRef, DestroyRef, afterRenderEffect, signal, Injectable, Directive, contentChild, contentChildren, NgModule } from '@angular/core';
|
|
3
3
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import * as i2 from '@skyux/i18n';
|
|
5
5
|
import { SkyIntlNumberFormatStyle, SkyIntlNumberFormatter, SkyAppLocaleProvider, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
@@ -29,23 +29,24 @@ class SkyChartAxisCategory {
|
|
|
29
29
|
* The categories shared by every series plotted against this axis. Each
|
|
30
30
|
* series' values are aligned to these categories by index.
|
|
31
31
|
*/
|
|
32
|
-
this.categories = input.required(
|
|
32
|
+
this.categories = input.required(/* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
33
34
|
/**
|
|
34
35
|
* Whether to hide the axis label.
|
|
35
36
|
*/
|
|
36
|
-
this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : {}), transform: booleanAttribute });
|
|
37
|
+
this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
37
38
|
/**
|
|
38
39
|
* The text of the axis label.
|
|
39
40
|
*/
|
|
40
|
-
this.labelText = input.required(
|
|
41
|
+
this.labelText = input.required(/* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
41
43
|
}
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
43
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartAxisCategory, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyChartAxisCategory, isStandalone: true, selector: "sky-chart-axis-category", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
|
|
44
46
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartAxisCategory, decorators: [{
|
|
46
48
|
type: Component,
|
|
47
49
|
args: [{
|
|
48
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
49
50
|
selector: 'sky-chart-axis-category',
|
|
50
51
|
template: '',
|
|
51
52
|
}]
|
|
@@ -105,43 +106,47 @@ class SkyChartAxisValue {
|
|
|
105
106
|
* The ISO 4217 currency code used when `format` is `currency`. When unset,
|
|
106
107
|
* currency values format as `USD`.
|
|
107
108
|
*/
|
|
108
|
-
this.currencyCode = input(
|
|
109
|
+
this.currencyCode = input(/* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [undefined, { debugName: "currencyCode" }] : /* istanbul ignore next */ []));
|
|
109
111
|
/**
|
|
110
112
|
* The number of decimal places to display. When unset, the format's
|
|
111
113
|
* locale-aware default is used (for example, two places for most
|
|
112
114
|
* currencies).
|
|
113
115
|
*/
|
|
114
|
-
this.digits = input(undefined, { ...(ngDevMode ? { debugName: "digits" } : {}), transform: optionalNumberAttribute });
|
|
116
|
+
this.digits = input(undefined, { ...(ngDevMode ? { debugName: "digits" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
115
117
|
/**
|
|
116
118
|
* How to format the axis values in axis labels, tooltips, and the data table.
|
|
117
119
|
* The `percent` format expects fractional values, so `0.25` displays as
|
|
118
120
|
* `25%`.
|
|
119
121
|
* @default 'number'
|
|
120
122
|
*/
|
|
121
|
-
this.format = input('number',
|
|
123
|
+
this.format = input('number', /* @ts-ignore */
|
|
124
|
+
...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
122
125
|
/**
|
|
123
126
|
* Whether to hide the axis label.
|
|
124
127
|
*/
|
|
125
|
-
this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : {}), transform: booleanAttribute });
|
|
128
|
+
this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
126
129
|
/**
|
|
127
130
|
* The text of the axis label.
|
|
128
131
|
*/
|
|
129
|
-
this.labelText = input.required(
|
|
132
|
+
this.labelText = input.required(/* @ts-ignore */
|
|
133
|
+
...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
130
134
|
/**
|
|
131
135
|
* The highest value to display on the axis. When unset, the axis scales to
|
|
132
136
|
* fit the plotted values.
|
|
133
137
|
*/
|
|
134
|
-
this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: optionalNumberAttribute });
|
|
138
|
+
this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
135
139
|
/**
|
|
136
140
|
* The lowest value to display on the axis. When unset, the axis scales to
|
|
137
141
|
* fit the plotted values.
|
|
138
142
|
*/
|
|
139
|
-
this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: optionalNumberAttribute });
|
|
143
|
+
this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
140
144
|
/**
|
|
141
145
|
* The scale type for the value axis.
|
|
142
146
|
* @default 'linear'
|
|
143
147
|
*/
|
|
144
|
-
this.scaleType = input('linear',
|
|
148
|
+
this.scaleType = input('linear', /* @ts-ignore */
|
|
149
|
+
...(ngDevMode ? [{ debugName: "scaleType" }] : /* istanbul ignore next */ []));
|
|
145
150
|
/**
|
|
146
151
|
* Formats a numeric value according to this axis's `format`, `currencyCode`,
|
|
147
152
|
* and the current locale.
|
|
@@ -152,17 +157,17 @@ class SkyChartAxisValue {
|
|
|
152
157
|
currencyCode: this.currencyCode(),
|
|
153
158
|
digits: this.digits(),
|
|
154
159
|
locale: this.#locale(),
|
|
155
|
-
}),
|
|
160
|
+
}), /* @ts-ignore */
|
|
161
|
+
...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
|
|
156
162
|
}
|
|
157
163
|
#localeProvider;
|
|
158
164
|
#locale;
|
|
159
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
160
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartAxisValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyChartAxisValue, isStandalone: true, selector: "sky-chart-axis-value", inputs: { currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, digits: { classPropertyName: "digits", publicName: "digits", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, scaleType: { classPropertyName: "scaleType", publicName: "scaleType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
|
|
161
167
|
}
|
|
162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartAxisValue, decorators: [{
|
|
163
169
|
type: Component,
|
|
164
170
|
args: [{
|
|
165
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
166
171
|
selector: 'sky-chart-axis-value',
|
|
167
172
|
template: '',
|
|
168
173
|
}]
|
|
@@ -386,10 +391,9 @@ class SkyChartJs {
|
|
|
386
391
|
/**
|
|
387
392
|
* The Chart.js configuration to render.
|
|
388
393
|
*/
|
|
389
|
-
this.config = input.required(
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
});
|
|
394
|
+
this.config = input.required(/* @ts-ignore */
|
|
395
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
396
|
+
this.chartRef = viewChild.required('chartRef', { ...(ngDevMode ? { debugName: "chartRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
393
397
|
inject(DestroyRef).onDestroy(() => {
|
|
394
398
|
this.#chart?.destroy();
|
|
395
399
|
this.#chart = undefined;
|
|
@@ -406,12 +410,12 @@ class SkyChartJs {
|
|
|
406
410
|
}
|
|
407
411
|
});
|
|
408
412
|
}
|
|
409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartJs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: SkyChartJs, isStandalone: true, selector: "sky-chart-js", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `<canvas #chartRef aria-hidden="true"></canvas>`, isInline: true, styles: [":host{display:block;position:relative}\n"] }); }
|
|
411
415
|
}
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartJs, decorators: [{
|
|
413
417
|
type: Component,
|
|
414
|
-
args: [{
|
|
418
|
+
args: [{ selector: 'sky-chart-js', template: `<canvas #chartRef aria-hidden="true"></canvas>`, styles: [":host{display:block;position:relative}\n"] }]
|
|
415
419
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { ...{
|
|
416
420
|
read: ElementRef,
|
|
417
421
|
}, isSignal: true }] }] } });
|
|
@@ -528,17 +532,19 @@ class SkyChartTableService {
|
|
|
528
532
|
* The current tabular representation of the chart, or `undefined` when the
|
|
529
533
|
* chart has no data to represent.
|
|
530
534
|
*/
|
|
531
|
-
this.table = signal(undefined,
|
|
535
|
+
this.table = signal(undefined, /* @ts-ignore */
|
|
536
|
+
...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
|
|
532
537
|
/**
|
|
533
538
|
* The current accessible summary of the chart, or `undefined` when the chart
|
|
534
539
|
* has no data to represent.
|
|
535
540
|
*/
|
|
536
|
-
this.summary = signal(undefined,
|
|
541
|
+
this.summary = signal(undefined, /* @ts-ignore */
|
|
542
|
+
...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
|
|
537
543
|
}
|
|
538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
539
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
545
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartTableService }); }
|
|
540
546
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartTableService, decorators: [{
|
|
542
548
|
type: Injectable
|
|
543
549
|
}] });
|
|
544
550
|
|
|
@@ -778,10 +784,10 @@ class SkyChartPlot {
|
|
|
778
784
|
getThemeStyles() {
|
|
779
785
|
return resolveChartThemeStyles(this.#elementRef.nativeElement);
|
|
780
786
|
}
|
|
781
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
782
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartPlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
788
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyChartPlot, isStandalone: true, ngImport: i0 }); }
|
|
783
789
|
}
|
|
784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartPlot, decorators: [{
|
|
785
791
|
type: Directive
|
|
786
792
|
}], ctorParameters: () => [] });
|
|
787
793
|
|
|
@@ -796,7 +802,8 @@ class SkyChartBarSeries {
|
|
|
796
802
|
/**
|
|
797
803
|
* The text that identifies this series in the legend and tooltips.
|
|
798
804
|
*/
|
|
799
|
-
this.labelText = input.required(
|
|
805
|
+
this.labelText = input.required(/* @ts-ignore */
|
|
806
|
+
...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
800
807
|
/**
|
|
801
808
|
* The stack this series belongs to. When a bar chart's `seriesLayout`
|
|
802
809
|
* is `stacked`, series that share the same `stackId` value accumulate into
|
|
@@ -804,7 +811,8 @@ class SkyChartBarSeries {
|
|
|
804
811
|
* are placed side by side. Omit to stack every series into one bar per
|
|
805
812
|
* category. Has no effect when `seriesLayout` is `grouped`.
|
|
806
813
|
*/
|
|
807
|
-
this.stackId = input(
|
|
814
|
+
this.stackId = input(/* @ts-ignore */
|
|
815
|
+
...(ngDevMode ? [undefined, { debugName: "stackId" }] : /* istanbul ignore next */ []));
|
|
808
816
|
/**
|
|
809
817
|
* The values for this series, aligned to the category axis categories by
|
|
810
818
|
* index. A number renders a standard bar measured from the value axis's
|
|
@@ -812,15 +820,15 @@ class SkyChartBarSeries {
|
|
|
812
820
|
* values, and a `null` value renders a gap in the chart and an empty cell
|
|
813
821
|
* in the data table.
|
|
814
822
|
*/
|
|
815
|
-
this.values = input.required(
|
|
823
|
+
this.values = input.required(/* @ts-ignore */
|
|
824
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
816
825
|
}
|
|
817
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
818
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
826
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartBarSeries, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyChartBarSeries, isStandalone: true, selector: "sky-chart-bar-series", inputs: { labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, stackId: { classPropertyName: "stackId", publicName: "stackId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
|
|
819
828
|
}
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartBarSeries, decorators: [{
|
|
821
830
|
type: Component,
|
|
822
831
|
args: [{
|
|
823
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
824
832
|
selector: 'sky-chart-bar-series',
|
|
825
833
|
template: '',
|
|
826
834
|
}]
|
|
@@ -841,7 +849,8 @@ class SkyChartBar extends SkyChartPlot {
|
|
|
841
849
|
* The orientation of the bars.
|
|
842
850
|
* @default 'vertical'
|
|
843
851
|
*/
|
|
844
|
-
this.orientation = input('vertical',
|
|
852
|
+
this.orientation = input('vertical', /* @ts-ignore */
|
|
853
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
845
854
|
/**
|
|
846
855
|
* How the bars of multiple series are arranged within each category.
|
|
847
856
|
* `grouped` places the series' bars side by side; `stacked` accumulates the
|
|
@@ -851,18 +860,24 @@ class SkyChartBar extends SkyChartPlot {
|
|
|
851
860
|
* series.
|
|
852
861
|
* @default 'grouped'
|
|
853
862
|
*/
|
|
854
|
-
this.seriesLayout = input('grouped',
|
|
855
|
-
|
|
856
|
-
this.
|
|
857
|
-
|
|
858
|
-
this.
|
|
863
|
+
this.seriesLayout = input('grouped', /* @ts-ignore */
|
|
864
|
+
...(ngDevMode ? [{ debugName: "seriesLayout" }] : /* istanbul ignore next */ []));
|
|
865
|
+
this.categoryAxis = contentChild(SkyChartAxisCategory, /* @ts-ignore */
|
|
866
|
+
...(ngDevMode ? [{ debugName: "categoryAxis" }] : /* istanbul ignore next */ []));
|
|
867
|
+
this.valueAxis = contentChild(SkyChartAxisValue, /* @ts-ignore */
|
|
868
|
+
...(ngDevMode ? [{ debugName: "valueAxis" }] : /* istanbul ignore next */ []));
|
|
869
|
+
this.series = contentChildren(SkyChartBarSeries, /* @ts-ignore */
|
|
870
|
+
...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
871
|
+
this.chartJsConfig = computed(() => this.#getChartJsConfig(), /* @ts-ignore */
|
|
872
|
+
...(ngDevMode ? [{ debugName: "chartJsConfig" }] : /* istanbul ignore next */ []));
|
|
859
873
|
/**
|
|
860
874
|
* The height to apply to the rendered chart. Chart.js runs with
|
|
861
875
|
* `maintainAspectRatio: false`, so its container must be given an explicit
|
|
862
876
|
* height. Vertical charts use the themed default; horizontal charts grow
|
|
863
877
|
* with their content so every bar stays legible.
|
|
864
878
|
*/
|
|
865
|
-
this.chartHeight = computed(() => this.#getChartHeight(),
|
|
879
|
+
this.chartHeight = computed(() => this.#getChartHeight(), /* @ts-ignore */
|
|
880
|
+
...(ngDevMode ? [{ debugName: "chartHeight" }] : /* istanbul ignore next */ []));
|
|
866
881
|
const logger = inject(SkyLogService);
|
|
867
882
|
// Values align to categories by index, so a length mismatch silently
|
|
868
883
|
// misaligns or drops data. Warn about the one alignment mistake that is
|
|
@@ -1146,12 +1161,12 @@ class SkyChartBar extends SkyChartPlot {
|
|
|
1146
1161
|
: 0;
|
|
1147
1162
|
return valueAxisHeight + legendHeight;
|
|
1148
1163
|
}
|
|
1149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyChartBar, isStandalone: true, selector: "sky-chart-bar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, seriesLayout: { classPropertyName: "seriesLayout", publicName: "seriesLayout", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryAxis", first: true, predicate: SkyChartAxisCategory, descendants: true, isSignal: true }, { propertyName: "valueAxis", first: true, predicate: SkyChartAxisValue, descendants: true, isSignal: true }, { propertyName: "series", predicate: SkyChartBarSeries, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chartJsConfig(); as config) {\n <sky-chart-js [config]=\"config\" [style.height]=\"chartHeight()\" />\n}\n", dependencies: [{ kind: "component", type: SkyChartJs, selector: "sky-chart-js", inputs: ["config"] }] }); }
|
|
1151
1166
|
}
|
|
1152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartBar, decorators: [{
|
|
1153
1168
|
type: Component,
|
|
1154
|
-
args: [{
|
|
1169
|
+
args: [{ imports: [SkyChartJs], selector: 'sky-chart-bar', template: "@if (chartJsConfig(); as config) {\n <sky-chart-js [config]=\"config\" [style.height]=\"chartHeight()\" />\n}\n" }]
|
|
1155
1170
|
}], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], seriesLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesLayout", required: false }] }], categoryAxis: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkyChartAxisCategory), { isSignal: true }] }], valueAxis: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkyChartAxisValue), { isSignal: true }] }], series: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyChartBarSeries), { isSignal: true }] }] } });
|
|
1156
1171
|
|
|
1157
1172
|
/* istanbul ignore file */
|
|
@@ -1198,11 +1213,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
1198
1213
|
* Import into any component library module that needs to use resource strings.
|
|
1199
1214
|
*/
|
|
1200
1215
|
class SkyChartsResourcesModule {
|
|
1201
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1202
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1203
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1217
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyChartsResourcesModule, exports: [SkyI18nModule] }); }
|
|
1218
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartsResourcesModule, imports: [SkyI18nModule] }); }
|
|
1204
1219
|
}
|
|
1205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartsResourcesModule, decorators: [{
|
|
1206
1221
|
type: NgModule,
|
|
1207
1222
|
args: [{
|
|
1208
1223
|
exports: [SkyI18nModule],
|
|
@@ -1216,12 +1231,12 @@ class SkyChartTableModal {
|
|
|
1216
1231
|
this.context = inject(SkyChartTableModalContext);
|
|
1217
1232
|
this.modal = inject(SkyModalInstance);
|
|
1218
1233
|
}
|
|
1219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1220
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartTableModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyChartTableModal, isStandalone: true, selector: "sky-chart-table-modal", ngImport: i0, template: "<sky-modal [headingText]=\"context.headingText\">\n <sky-modal-content>\n @if (context.table; as table) {\n <div\n class=\"sky-chart-data-table-wrapper\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n 'skyux_charts.data_table_modal.table_region_label'\n | skyLibResources: context.headingText\n \"\n >\n <table class=\"sky-chart-data-table\">\n <thead>\n <tr>\n <th scope=\"col\">\n {{ table.categoryLabel }}\n </th>\n @for (series of table.series; track $index) {\n <th scope=\"col\">\n {{ series.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (\n category of table.categories;\n track $index;\n let rowIndex = $index\n ) {\n <tr>\n <th scope=\"row\">\n {{ category }}\n </th>\n @for (series of table.series; track $index) {\n <td>\n {{ series.values[rowIndex] }}\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-link sky-chart-table-modal-close\"\n type=\"button\"\n (click)=\"modal.close()\"\n >\n {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-chart-data-table:not(.sky-theme-modern *){--sky-override-chart-table-color-text-default: #212327;--sky-override-chart-table-color-text-heading: #212327;--sky-override-chart-table-header-background-color: #eeeeef;--sky-override-chart-table-row-border: 1px solid #cdcfd2;--sky-override-chart-table-cell-padding: 8px 12px}.sky-chart-data-table-wrapper{overflow-x:auto}.sky-chart-data-table{border-collapse:collapse;width:100%;color:var(--sky-override-chart-table-color-text-default, var(--sky-color-text-default))}.sky-chart-data-table th{text-align:left}.sky-chart-data-table td,.sky-chart-data-table th{padding:var(--sky-override-chart-table-cell-padding, var(--sky-comp-grid-cell-space-inset-top) var(--sky-comp-grid-cell-space-inset-right) var(--sky-comp-grid-cell-space-inset-bottom) var(--sky-comp-grid-cell-space-inset-left))}.sky-chart-data-table td,.sky-chart-data-table thead th:not(:first-child){text-align:right}.sky-chart-data-table thead th{background-color:var(--sky-override-chart-table-header-background-color, var(--sky-background-color-page-default));color:var(--sky-override-chart-table-color-text-heading, var(--sky-color-text-heading))}.sky-chart-data-table thead tr,.sky-chart-data-table tbody tr:not(:last-child){border-bottom:var(--sky-override-chart-table-row-border, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row))}\n"], dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1221
1236
|
}
|
|
1222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartTableModal, decorators: [{
|
|
1223
1238
|
type: Component,
|
|
1224
|
-
args: [{
|
|
1239
|
+
args: [{ imports: [SkyChartsResourcesModule, SkyModalModule], selector: 'sky-chart-table-modal', template: "<sky-modal [headingText]=\"context.headingText\">\n <sky-modal-content>\n @if (context.table; as table) {\n <div\n class=\"sky-chart-data-table-wrapper\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"\n 'skyux_charts.data_table_modal.table_region_label'\n | skyLibResources: context.headingText\n \"\n >\n <table class=\"sky-chart-data-table\">\n <thead>\n <tr>\n <th scope=\"col\">\n {{ table.categoryLabel }}\n </th>\n @for (series of table.series; track $index) {\n <th scope=\"col\">\n {{ series.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (\n category of table.categories;\n track $index;\n let rowIndex = $index\n ) {\n <tr>\n <th scope=\"row\">\n {{ category }}\n </th>\n @for (series of table.series; track $index) {\n <td>\n {{ series.values[rowIndex] }}\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-link sky-chart-table-modal-close\"\n type=\"button\"\n (click)=\"modal.close()\"\n >\n {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-chart-data-table:not(.sky-theme-modern *){--sky-override-chart-table-color-text-default: #212327;--sky-override-chart-table-color-text-heading: #212327;--sky-override-chart-table-header-background-color: #eeeeef;--sky-override-chart-table-row-border: 1px solid #cdcfd2;--sky-override-chart-table-cell-padding: 8px 12px}.sky-chart-data-table-wrapper{overflow-x:auto}.sky-chart-data-table{border-collapse:collapse;width:100%;color:var(--sky-override-chart-table-color-text-default, var(--sky-color-text-default))}.sky-chart-data-table th{text-align:left}.sky-chart-data-table td,.sky-chart-data-table th{padding:var(--sky-override-chart-table-cell-padding, var(--sky-comp-grid-cell-space-inset-top) var(--sky-comp-grid-cell-space-inset-right) var(--sky-comp-grid-cell-space-inset-bottom) var(--sky-comp-grid-cell-space-inset-left))}.sky-chart-data-table td,.sky-chart-data-table thead th:not(:first-child){text-align:right}.sky-chart-data-table thead th{background-color:var(--sky-override-chart-table-header-background-color, var(--sky-background-color-page-default));color:var(--sky-override-chart-table-color-text-heading, var(--sky-color-text-heading))}.sky-chart-data-table thead tr,.sky-chart-data-table tbody tr:not(:last-child){border-bottom:var(--sky-override-chart-table-row-border, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row))}\n"] }]
|
|
1225
1240
|
}] });
|
|
1226
1241
|
|
|
1227
1242
|
class SkyChartControls {
|
|
@@ -1229,7 +1244,8 @@ class SkyChartControls {
|
|
|
1229
1244
|
this.#destroyRef = inject(DestroyRef);
|
|
1230
1245
|
this.#modalSvc = inject(SkyModalService);
|
|
1231
1246
|
this.#tableSvc = inject(SkyChartTableService);
|
|
1232
|
-
this.headingText = input.required(
|
|
1247
|
+
this.headingText = input.required(/* @ts-ignore */
|
|
1248
|
+
...(ngDevMode ? [{ debugName: "headingText" }] : /* istanbul ignore next */ []));
|
|
1233
1249
|
/**
|
|
1234
1250
|
* The plot's data table. The context menu's only action is viewing the
|
|
1235
1251
|
* data table, so the menu renders only while a table is available — a
|
|
@@ -1256,32 +1272,39 @@ class SkyChartControls {
|
|
|
1256
1272
|
});
|
|
1257
1273
|
this.#destroyRef.onDestroy(() => instance.close());
|
|
1258
1274
|
}
|
|
1259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1260
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyChartControls, isStandalone: true, selector: "sky-chart-controls", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (table()) {\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'skyux_charts.chart.controls.context_menu.accessible_name'\n | skyLibResources: headingText()\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"openDataTableModal()\">\n {{\n 'skyux_charts.chart.controls.context_menu.view_data_table'\n | skyLibResources\n }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1261
1277
|
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartControls, decorators: [{
|
|
1263
1279
|
type: Component,
|
|
1264
|
-
args: [{
|
|
1280
|
+
args: [{ imports: [SkyChartsResourcesModule, SkyDropdownModule], selector: 'sky-chart-controls', template: "@if (table()) {\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'skyux_charts.chart.controls.context_menu.accessible_name'\n | skyLibResources: headingText()\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"openDataTableModal()\">\n {{\n 'skyux_charts.chart.controls.context_menu.view_data_table'\n | skyLibResources\n }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n}\n" }]
|
|
1265
1281
|
}], propDecorators: { headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }] } });
|
|
1266
1282
|
|
|
1267
1283
|
class SkyChartHeading {
|
|
1268
1284
|
constructor() {
|
|
1269
|
-
this.headingLevel = input.required(
|
|
1270
|
-
|
|
1271
|
-
this.
|
|
1272
|
-
|
|
1273
|
-
this.
|
|
1274
|
-
|
|
1285
|
+
this.headingLevel = input.required(/* @ts-ignore */
|
|
1286
|
+
...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
1287
|
+
this.headingStyle = input.required(/* @ts-ignore */
|
|
1288
|
+
...(ngDevMode ? [{ debugName: "headingStyle" }] : /* istanbul ignore next */ []));
|
|
1289
|
+
this.headingText = input.required(/* @ts-ignore */
|
|
1290
|
+
...(ngDevMode ? [{ debugName: "headingText" }] : /* istanbul ignore next */ []));
|
|
1291
|
+
this.helpKey = input(/* @ts-ignore */
|
|
1292
|
+
...(ngDevMode ? [undefined, { debugName: "helpKey" }] : /* istanbul ignore next */ []));
|
|
1293
|
+
this.helpPopoverContent = input(/* @ts-ignore */
|
|
1294
|
+
...(ngDevMode ? [undefined, { debugName: "helpPopoverContent" }] : /* istanbul ignore next */ []));
|
|
1295
|
+
this.helpPopoverTitle = input(/* @ts-ignore */
|
|
1296
|
+
...(ngDevMode ? [undefined, { debugName: "helpPopoverTitle" }] : /* istanbul ignore next */ []));
|
|
1275
1297
|
this.headingClass = computed(() => {
|
|
1276
1298
|
return `sky-font-heading-${this.headingStyle()}`;
|
|
1277
|
-
},
|
|
1299
|
+
}, /* @ts-ignore */
|
|
1300
|
+
...(ngDevMode ? [{ debugName: "headingClass" }] : /* istanbul ignore next */ []));
|
|
1278
1301
|
}
|
|
1279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1302
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartHeading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyChartHeading, isStandalone: true, selector: "sky-chart-heading", inputs: { headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: true, transformFunction: null }, headingStyle: { classPropertyName: "headingStyle", publicName: "headingStyle", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (headingLevel()) {\n @case (2) {\n <h2 [class]=\"headingClass()\">{{ headingText() }}</h2>\n }\n @case (3) {\n <h3 [class]=\"headingClass()\">{{ headingText() }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass()\">{{ headingText() }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass()\">{{ headingText() }}</h5>\n }\n}\n@if (helpPopoverContent() || helpKey()) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey()\"\n [labelText]=\"headingText()\"\n [popoverContent]=\"helpPopoverContent()\"\n [popoverTitle]=\"helpPopoverTitle()\"\n />\n </span>\n}\n", styles: ["h2,h3,h4,h5{display:inline;margin-block:0}\n"], dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
|
|
1281
1304
|
}
|
|
1282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartHeading, decorators: [{
|
|
1283
1306
|
type: Component,
|
|
1284
|
-
args: [{
|
|
1307
|
+
args: [{ imports: [SkyHelpInlineModule], selector: 'sky-chart-heading', template: "@switch (headingLevel()) {\n @case (2) {\n <h2 [class]=\"headingClass()\">{{ headingText() }}</h2>\n }\n @case (3) {\n <h3 [class]=\"headingClass()\">{{ headingText() }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass()\">{{ headingText() }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass()\">{{ headingText() }}</h5>\n }\n}\n@if (helpPopoverContent() || helpKey()) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey()\"\n [labelText]=\"headingText()\"\n [popoverContent]=\"helpPopoverContent()\"\n [popoverTitle]=\"helpPopoverTitle()\"\n />\n </span>\n}\n", styles: ["h2,h3,h4,h5{display:inline;margin-block:0}\n"] }]
|
|
1285
1308
|
}], propDecorators: { headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: true }] }], headingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingStyle", required: true }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }], helpKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpKey", required: false }] }], helpPopoverContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverContent", required: false }] }], helpPopoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverTitle", required: false }] }] } });
|
|
1286
1309
|
|
|
1287
1310
|
const DEFAULT_HEADING_LEVEL = 3;
|
|
@@ -1310,14 +1333,15 @@ function isHeadingStyle(value) {
|
|
|
1310
1333
|
|
|
1311
1334
|
class SkyChartSubheading {
|
|
1312
1335
|
constructor() {
|
|
1313
|
-
this.subheadingText = input.required(
|
|
1336
|
+
this.subheadingText = input.required(/* @ts-ignore */
|
|
1337
|
+
...(ngDevMode ? [{ debugName: "subheadingText" }] : /* istanbul ignore next */ []));
|
|
1314
1338
|
}
|
|
1315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartSubheading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyChartSubheading, isStandalone: true, selector: "sky-chart-subheading", inputs: { subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `{{ subheadingText() }}`, isInline: true, styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-size-body-m: 15px;--sky-override-chart-font-style-body-m: 400;--sky-override-chart-font-line_height-body-m: 1.3333}:host{display:block;font-family:var(--sky-override-chart-font-family-primary, var(--sky-font-family-primary));font-size:var(--sky-override-chart-font-size-body-m, var(--sky-font-size-body-m));font-weight:var(--sky-override-chart-font-style-body-m, var(--sky-font-style-body-m));line-height:var(--sky-override-chart-font-line_height-body-m, var(--sky-font-line_height-body-m));color:var(--sky-override-chart-color-text-deemphasized, var(--sky-color-text-deemphasized))}\n"] }); }
|
|
1317
1341
|
}
|
|
1318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1342
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChartSubheading, decorators: [{
|
|
1319
1343
|
type: Component,
|
|
1320
|
-
args: [{
|
|
1344
|
+
args: [{ selector: 'sky-chart-subheading', template: `{{ subheadingText() }}`, styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-size-body-m: 15px;--sky-override-chart-font-style-body-m: 400;--sky-override-chart-font-line_height-body-m: 1.3333}:host{display:block;font-family:var(--sky-override-chart-font-family-primary, var(--sky-font-family-primary));font-size:var(--sky-override-chart-font-size-body-m, var(--sky-font-size-body-m));font-weight:var(--sky-override-chart-font-style-body-m, var(--sky-font-style-body-m));line-height:var(--sky-override-chart-font-line_height-body-m, var(--sky-font-line_height-body-m));color:var(--sky-override-chart-color-text-deemphasized, var(--sky-color-text-deemphasized))}\n"] }]
|
|
1321
1345
|
}], propDecorators: { subheadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheadingText", required: true }] }] } });
|
|
1322
1346
|
|
|
1323
1347
|
/**
|
|
@@ -1330,48 +1354,53 @@ class SkyChart {
|
|
|
1330
1354
|
/**
|
|
1331
1355
|
* Whether to hide the chart's heading.
|
|
1332
1356
|
*/
|
|
1333
|
-
this.headingHidden = input(false, { ...(ngDevMode ? { debugName: "headingHidden" } : {}), transform: booleanAttribute });
|
|
1357
|
+
this.headingHidden = input(false, { ...(ngDevMode ? { debugName: "headingHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1334
1358
|
/**
|
|
1335
1359
|
* The semantic heading level in the document structure.
|
|
1336
1360
|
* @default 3
|
|
1337
1361
|
*/
|
|
1338
|
-
this.headingLevel = input(DEFAULT_HEADING_LEVEL, { ...(ngDevMode ? { debugName: "headingLevel" } : {}), transform: headingLevelInputTransformer });
|
|
1362
|
+
this.headingLevel = input(DEFAULT_HEADING_LEVEL, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: headingLevelInputTransformer });
|
|
1339
1363
|
/**
|
|
1340
1364
|
* The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
|
|
1341
1365
|
* @default 3
|
|
1342
1366
|
*/
|
|
1343
|
-
this.headingStyle = input(DEFAULT_HEADING_STYLE, { ...(ngDevMode ? { debugName: "headingStyle" } : {}), transform: headingStyleInputTransformer });
|
|
1367
|
+
this.headingStyle = input(DEFAULT_HEADING_STYLE, { ...(ngDevMode ? { debugName: "headingStyle" } : /* istanbul ignore next */ {}), transform: headingStyleInputTransformer });
|
|
1344
1368
|
/**
|
|
1345
1369
|
* The text to display as the chart's heading.
|
|
1346
1370
|
*/
|
|
1347
|
-
this.headingText = input.required(
|
|
1371
|
+
this.headingText = input.required(/* @ts-ignore */
|
|
1372
|
+
...(ngDevMode ? [{ debugName: "headingText" }] : /* istanbul ignore next */ []));
|
|
1348
1373
|
/**
|
|
1349
1374
|
* A help key that identifies the global help content to display. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
|
|
1350
1375
|
* button is placed beside the chart heading. Clicking the button invokes [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help)
|
|
1351
1376
|
* as configured by the application.
|
|
1352
1377
|
*/
|
|
1353
|
-
this.helpKey = input(
|
|
1378
|
+
this.helpKey = input(/* @ts-ignore */
|
|
1379
|
+
...(ngDevMode ? [undefined, { debugName: "helpKey" }] : /* istanbul ignore next */ []));
|
|
1354
1380
|
/**
|
|
1355
1381
|
* The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
|
|
1356
1382
|
* button is added to the chart heading. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)
|
|
1357
1383
|
* when clicked using the specified content and optional title.
|
|
1358
1384
|
*/
|
|
1359
|
-
this.helpPopoverContent = input(
|
|
1385
|
+
this.helpPopoverContent = input(/* @ts-ignore */
|
|
1386
|
+
...(ngDevMode ? [undefined, { debugName: "helpPopoverContent" }] : /* istanbul ignore next */ []));
|
|
1360
1387
|
/**
|
|
1361
1388
|
* The title of the help popover. This property only applies when `helpPopoverContent` is also specified.
|
|
1362
1389
|
*/
|
|
1363
|
-
this.helpPopoverTitle = input(
|
|
1390
|
+
this.helpPopoverTitle = input(/* @ts-ignore */
|
|
1391
|
+
...(ngDevMode ? [undefined, { debugName: "helpPopoverTitle" }] : /* istanbul ignore next */ []));
|
|
1364
1392
|
/**
|
|
1365
1393
|
* Whether the chart's data is being loaded. When `true`, a wait overlay
|
|
1366
1394
|
* covers the chart's content area, which reserves the default chart height
|
|
1367
1395
|
* while no plot is rendered. The heading and help button stay interactive.
|
|
1368
1396
|
* @default false
|
|
1369
1397
|
*/
|
|
1370
|
-
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
1398
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1371
1399
|
/**
|
|
1372
1400
|
* The text to display as the chart's subheading.
|
|
1373
1401
|
*/
|
|
1374
|
-
this.subheadingText = input(
|
|
1402
|
+
this.subheadingText = input(/* @ts-ignore */
|
|
1403
|
+
...(ngDevMode ? [undefined, { debugName: "subheadingText" }] : /* istanbul ignore next */ []));
|
|
1375
1404
|
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
1376
1405
|
this.#tableSvc = inject(SkyChartTableService);
|
|
1377
1406
|
// Resolve the plot's descriptive summary into localized text. Each plot type
|
|
@@ -1400,7 +1429,8 @@ class SkyChart {
|
|
|
1400
1429
|
parts.push(summaryText);
|
|
1401
1430
|
}
|
|
1402
1431
|
return parts.length > 0 ? parts.join('. ') : null;
|
|
1403
|
-
},
|
|
1432
|
+
}, /* @ts-ignore */
|
|
1433
|
+
...(ngDevMode ? [{ debugName: "figureLabel" }] : /* istanbul ignore next */ []));
|
|
1404
1434
|
}
|
|
1405
1435
|
#resourcesSvc;
|
|
1406
1436
|
#tableSvc;
|
|
@@ -1408,12 +1438,12 @@ class SkyChart {
|
|
|
1408
1438
|
// publishes its own resource key and arguments, so the wording can describe
|
|
1409
1439
|
// that type's shape.
|
|
1410
1440
|
#summaryText;
|
|
1411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1441
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyChart, isStandalone: true, selector: "sky-chart", inputs: { headingHidden: { classPropertyName: "headingHidden", publicName: "headingHidden", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, headingStyle: { classPropertyName: "headingStyle", publicName: "headingStyle", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyChartTableService], ngImport: i0, template: "<div class=\"sky-chart-header\">\n <div>\n @if (!headingHidden()) {\n <sky-chart-heading\n [headingLevel]=\"headingLevel()\"\n [headingStyle]=\"headingStyle()\"\n [headingText]=\"headingText()\"\n [helpKey]=\"helpKey()\"\n [helpPopoverContent]=\"helpPopoverContent()\"\n [helpPopoverTitle]=\"helpPopoverTitle()\"\n />\n @if (subheadingText(); as subheadingText) {\n <sky-chart-subheading [subheadingText]=\"subheadingText\" />\n }\n }\n </div>\n @if (!loading()) {\n <sky-chart-controls [headingText]=\"headingText()\" />\n }\n</div>\n<figure\n class=\"sky-chart-content\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-label]=\"figureLabel()\"\n [attr.role]=\"figureLabel() ? 'img' : null\"\n [class.sky-chart-content-loading]=\"loading()\"\n>\n <sky-wait [isWaiting]=\"loading()\" />\n <ng-content />\n</figure>\n", styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-family-primary: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-chart-font-size-body-s: 13px;--sky-override-chart-font-style-body-s: 400;--sky-override-chart-font-style-emphasized: 700;--sky-override-chart-font-line_height-body-s: 1.3846;--sky-override-chart-color-text-default: #212327;--sky-override-chart-color-text-deemphasized: #686c73;--sky-override-chart-color-viz-axis: #cdcfd2;--sky-override-chart-color-viz-gridline: #eeeeef;--sky-override-chart-color-viz-category-1: #06a39e;--sky-override-chart-color-viz-category-2: #6d3c96;--sky-override-chart-color-viz-category-3: #5589dd;--sky-override-chart-color-viz-category-4: #004252;--sky-override-chart-color-viz-category-5: #ce5600;--sky-override-chart-color-viz-category-6: #822325;--sky-override-chart-color-viz-category-7: #c650c1;--sky-override-chart-color-viz-category-8: #077e43;--sky-override-chart-color-background-container-base: #ffffff;--sky-override-chart-color-border-container-base: #cdcfd2;--sky-override-chart-size-chart-tick_length-measure: 12px;--sky-override-chart-space-stacked-xs: 4px;--sky-override-chart-space-stacked-s: 8px;--sky-override-chart-space-stacked-0: 0px;--sky-override-chart-space-gap-icon-s: 4px;--sky-override-chart-space-gap-text_action-m: 12px;--sky-override-chart-size-icon-xs: 16px;--sky-override-chart-border-width-container-base: 1px;--sky-override-chart-border-radius-s: 4px;--sky-override-chart-border-radius-xs: 2px;--sky-override-chart-comp-chart-tooltip-space-inset-top: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-right: 12px;--sky-override-chart-comp-chart-tooltip-space-inset-bottom: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-left: 12px}:host{display:block;--sky-chart-height-min: 11.25rem;--sky-chart-height-viewport: 28vh;--sky-chart-height-max: 25rem}.sky-chart-header{display:flex;align-items:baseline;justify-content:space-between;column-gap:var(--sky-override-chart-space-gap-text_action-m, var(--sky-space-gap-text_action-m));margin-bottom:var(--sky-override-chart-space-stacked-s, var(--sky-space-stacked-s))}figure.sky-chart-content{margin:0}figure.sky-chart-content-loading{position:relative;min-height:clamp(var(--sky-chart-height-min),var(--sky-chart-height-viewport),var(--sky-chart-height-max))}\n"], dependencies: [{ kind: "component", type: SkyChartControls, selector: "sky-chart-controls", inputs: ["headingText"] }, { kind: "component", type: SkyChartHeading, selector: "sky-chart-heading", inputs: ["headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: SkyChartSubheading, selector: "sky-chart-subheading", inputs: ["subheadingText"] }, { kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
1413
1443
|
}
|
|
1414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyChart, decorators: [{
|
|
1415
1445
|
type: Component,
|
|
1416
|
-
args: [{
|
|
1446
|
+
args: [{ imports: [
|
|
1417
1447
|
SkyChartControls,
|
|
1418
1448
|
SkyChartHeading,
|
|
1419
1449
|
SkyChartSubheading,
|