@kirbydesign/designsystem 4.0.12 → 4.0.13
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/bundles/kirbydesign-designsystem.umd.js +64 -37
- package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
- package/esm2015/lib/components/chart/chart.component.js +25 -2
- package/esm2015/lib/components/chart/chart.component.metadata.json +1 -1
- package/fesm2015/kirbydesign-designsystem.js +59 -37
- package/fesm2015/kirbydesign-designsystem.js.map +1 -1
- package/kirbydesign-designsystem.metadata.json +1 -1
- package/lib/components/chart/chart.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component, ElementRef, HostBinding, Input, ViewChild, } from '@angular/core';
|
|
2
|
+
import { ResizeObserverFactory } from '../shared';
|
|
2
3
|
import { ChartJSService } from './chart-js/chart-js.service';
|
|
3
4
|
export class ChartComponent {
|
|
4
5
|
constructor(chartJSService) {
|
|
@@ -9,7 +10,29 @@ export class ChartComponent {
|
|
|
9
10
|
this._height = typeof value === 'number' ? `${value}px` : value;
|
|
10
11
|
}
|
|
11
12
|
ngAfterViewInit() {
|
|
12
|
-
|
|
13
|
+
/*
|
|
14
|
+
A chart is not rendered until it has both a height and a width.
|
|
15
|
+
If ChartComponent is slotted in an ionic component it will
|
|
16
|
+
not have any height or width on afterViewInit. This will cause
|
|
17
|
+
the animation to not be played on first draw.
|
|
18
|
+
*/
|
|
19
|
+
const canvasElement = this.canvasElement.nativeElement;
|
|
20
|
+
this.whenElementHasHeightAndWidth(canvasElement).then(() => this.renderChart());
|
|
21
|
+
}
|
|
22
|
+
whenElementHasHeightAndWidth(element) {
|
|
23
|
+
const rectIs2D = ({ width, height }) => height > 0 && width > 0;
|
|
24
|
+
return new Promise((resolve) => {
|
|
25
|
+
const initialClientRect = element.getBoundingClientRect();
|
|
26
|
+
if (rectIs2D(initialClientRect))
|
|
27
|
+
resolve();
|
|
28
|
+
const resizeObserver = new ResizeObserverFactory().create(([resizeObserverEntry]) => {
|
|
29
|
+
if (rectIs2D(resizeObserverEntry.contentRect)) {
|
|
30
|
+
resizeObserver.unobserve(element);
|
|
31
|
+
resolve();
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
resizeObserver.observe(element);
|
|
35
|
+
});
|
|
13
36
|
}
|
|
14
37
|
ngOnChanges(simpleChanges) {
|
|
15
38
|
let shouldRedrawChart = false;
|
|
@@ -86,4 +109,4 @@ ChartComponent.propDecorators = {
|
|
|
86
109
|
height: [{ type: Input }],
|
|
87
110
|
canvasElement: [{ type: ViewChild, args: ['chartCanvas',] }]
|
|
88
111
|
};
|
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
112
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2NoYXJ0L2NoYXJ0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsS0FBSyxFQUdMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUUscUJBQXFCLEVBQXlCLE1BQU0sV0FBVyxDQUFDO0FBRXpFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQVM3RCxNQUFNLE9BQU8sY0FBYztJQWlCekIsWUFBb0IsY0FBOEI7UUFBOUIsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBaEJ6QyxTQUFJLEdBQWMsUUFBUSxDQUFDO0lBZ0JpQixDQUFDO0lBUHRELElBQWEsTUFBTSxDQUFDLEtBQXNCO1FBQ3hDLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxLQUFLLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDbEUsQ0FBQztJQU9ELGVBQWU7UUFDYjs7Ozs7VUFLRTtRQUNGLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDO1FBQ3ZELElBQUksQ0FBQyw0QkFBNEIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDbEYsQ0FBQztJQUVPLDRCQUE0QixDQUFDLE9BQW9CO1FBQ3ZELE1BQU0sUUFBUSxHQUFHLENBQUMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksS0FBSyxHQUFHLENBQUMsQ0FB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QUFJLENBQUMsQ0FBQztJQUNuRSxDQUFDO0lBRU8saUJBQWlCO1FBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFTyx5QkFBeUI7UUFDL0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUMxRSxDQUFDO0lBRU8sV0FBVztRQUNqQixJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3BDLENBQUM7OztZQWpIRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLDRSQUFxQztnQkFFckMsU0FBUyxFQUFFLENBQUMsY0FBYyxDQUFDOzthQUM1Qjs7OztZQVJRLGNBQWM7OzttQkFVcEIsS0FBSzttQkFDTCxLQUFLO3lCQUNMLEtBQUs7NEJBQ0wsS0FBSzswQkFDTCxLQUFLO2tDQUNMLEtBQUs7c0JBRUwsV0FBVyxTQUFDLDRCQUE0QjtxQkFFeEMsS0FBSzs0QkFJTCxTQUFTLFNBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDaGFydE9wdGlvbnMgfSBmcm9tICdjaGFydC5qcyc7XG5pbXBvcnQgeyBBbm5vdGF0aW9uT3B0aW9ucyB9IGZyb20gJ2NoYXJ0anMtcGx1Z2luLWFubm90YXRpb24nO1xuXG5pbXBvcnQgeyBSZXNpemVPYnNlcnZlckZhY3RvcnksIFJlc2l6ZU9ic2VydmVyU2VydmljZSB9IGZyb20gJy4uL3NoYXJlZCc7XG5cbmltcG9ydCB7IENoYXJ0SlNTZXJ2aWNlIH0gZnJvbSAnLi9jaGFydC1qcy9jaGFydC1qcy5zZXJ2aWNlJztcbmltcG9ydCB7IENoYXJ0RGF0YXNldCwgQ2hhcnRIaWdobGlnaHRlZEVsZW1lbnRzLCBDaGFydFR5cGUgfSBmcm9tICcuL2NoYXJ0LnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnktY2hhcnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGFydC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtDaGFydEpTU2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIENoYXJ0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgdHlwZTogQ2hhcnRUeXBlID0gJ2NvbHVtbic7XG4gIEBJbnB1dCgpIGRhdGE6IENoYXJ0RGF0YXNldFtdIHwgbnVtYmVyW107XG4gIEBJbnB1dCgpIGRhdGFMYWJlbHM/OiBzdHJpbmdbXSB8IHN0cmluZ1tdW107XG4gIEBJbnB1dCgpIGN1c3RvbU9wdGlvbnM/OiBDaGFydE9wdGlvbnM7XG4gIEBJbnB1dCgpIGFubm90YXRpb25zPzogQW5ub3RhdGlvbk9wdGlvbnNbXTtcbiAgQElucHV0KCkgaGlnaGxpZ2h0ZWRFbGVtZW50cz86IENoYXJ0SGlnaGxpZ2h0ZWRFbGVtZW50cztcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLi0ta2lyYnktY2hhcnQtaGVpZ2h0JylcbiAgX2hlaWdodDogc3RyaW5nO1xuICBASW5wdXQoKSBzZXQgaGVpZ2h0KHZhbHVlOiBzdHJpbmcgfCBudW1iZXIpIHtcbiAgICB0aGlzLl9oZWlnaHQgPSB0eXBlb2YgdmFsdWUgPT09ICdudW1iZXInID8gYCR7dmFsdWV9cHhgIDogdmFsdWU7XG4gIH1cblxuICBAVmlld0NoaWxkKCdjaGFydENhbnZhcycpXG4gIGNhbnZhc0VsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTENhbnZhc0VsZW1lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhcnRKU1NlcnZpY2U6IENoYXJ0SlNTZXJ2aWNlKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAvKiBcbiAgICAgICBBIGNoYXJ0IGlzIG5vdCByZW5kZXJlZCB1bnRpbCBpdCBoYXMgYm90aCBhIGhlaWdodCBhbmQgYSB3aWR0aC4gXG4gICAgICAgSWYgQ2hhcnRDb21wb25lbnQgaXMgc2xvdHRlZCBpbiBhbiBpb25pYyBjb21wb25lbnQgaXQgd2lsbFxuICAgICAgIG5vdCBoYXZlIGFueSBoZWlnaHQgb3Igd2lkdGggb24gYWZ0ZXJWaWV3SW5pdC4gVGhpcyB3aWxsIGNhdXNlIFxuICAgICAgIHRoZSBhbmltYXRpb24gdG8gbm90IGJlIHBsYXllZCBvbiBmaXJzdCBkcmF3LiBcbiAgICAqL1xuICAgIGNvbnN0IGNhbnZhc0VsZW1lbnQgPSB0aGlzLmNhbnZhc0VsZW1lbnQubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLndoZW5FbGVtZW50SGFzSGVpZ2h0QW5kV2lkdGgoY2FudmFzRWxlbWVudCkudGhlbigoKSA9PiB0aGlzLnJlbmRlckNoYXJ0KCkpO1xuICB9XG5cbiAgcHJpdmF0ZSB3aGVuRWxlbWVudEhhc0hlaWdodEFuZFdpZHRoKGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogUHJvbWlzZTx2b2lkPiB7XG4gICAgY29uc3QgcmVjdElzMkQgPSAoeyB3aWR0aCwgaGVpZ2h0IH0pID0+IGhlaWdodCA+IDAgJiYgd2lkdGggPiAwO1xuXG4gICAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlKSA9PiB7XG4gICAgICBjb25zdCBpbml0aWFsQ2xpZW50UmVjdCA9IGVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgICBpZiAocmVjdElzMkQoaW5pdGlhbENsaWVudFJlY3QpKSByZXNvbHZlKCk7XG5cbiAgICAgIGNvbnN0IHJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyRmFjdG9yeSgpLmNyZWF0ZSgoW3Jlc2l6ZU9ic2VydmVyRW50cnldKSA9PiB7XG4gICAgICAgIGlmIChyZWN0SXMyRChyZXNpemVPYnNlcnZlckVudHJ5LmNvbnRlbnRSZWN0KSkge1xuICAgICAgICAgIHJlc2l6ZU9ic2VydmVyLnVub2JzZXJ2ZShlbGVtZW50KTtcbiAgICAgICAgICByZXNvbHZlKCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuXG4gICAgICByZXNpemVPYnNlcnZlci5vYnNlcnZlKGVsZW1lbnQpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoc2ltcGxlQ2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGxldCBzaG91bGRSZWRyYXdDaGFydCA9IGZhbHNlO1xuXG4gICAgY29uc3Qga2V5VXBkYXRlRm5QYWlycyA9IHtcbiAgICAgIGRhdGE6ICgpID0+IHRoaXMudXBkYXRlRGF0YSgpLFxuICAgICAgZGF0YUxhYmVsczogKCkgPT4gdGhpcy51cGRhdGVEYXRhTGFiZWxzKCksXG4gICAgICB0eXBlOiAoKSA9PiB0aGlzLnVwZGF0ZVR5cGUoKSxcbiAgICAgIGN1c3RvbU9wdGlvbnM6ICgpID0+IHRoaXMudXBkYXRlQ3VzdG9tT3B0aW9ucygpLFxuICAgICAgYW5ub3RhdGlvbnM6ICgpID0+IHRoaXMudXBkYXRlQW5ub3RhdGlvbnMoKSxcbiAgICAgIGhpZ2hsaWdodGVkRWxlbWVudHM6ICgpID0+IHRoaXMudXBkYXRlSGlnaGxpZ2h0ZWRFbGVtZW50cygpLFxuICAgIH07XG5cbiAgICBPYmplY3QuZW50cmllcyhzaW1wbGVDaGFuZ2VzKS5mb3JFYWNoKChba2V5XSkgPT4ge1xuICAgICAgaWYgKHNpbXBsZUNoYW5nZXNba2V5XS5maXJzdENoYW5nZSB8fCAha2V5VXBkYXRlRm5QYWlyc1trZXldKSByZXR1cm47XG4gICAgICBzaG91bGRSZWRyYXdDaGFydCA9IHRydWU7XG4gICAgICBrZXlVcGRhdGVGblBhaXJzW2tleV0oKTtcbiAgICB9KTtcblxuICAgIGlmIChzaG91bGRSZWRyYXdDaGFydCkgdGhpcy5yZWRyYXdDaGFydCgpO1xuICB9XG5cbiAgcHJpdmF0ZSByZW5kZXJDaGFydCgpIHtcbiAgICB0aGlzLmNoYXJ0SlNTZXJ2aWNlLnJlbmRlckNoYXJ0KHtcbiAgICAgIHRhcmdldEVsZW1lbnQ6IHRoaXMuY2FudmFzRWxlbWVudCxcbiAgICAgIHR5cGU6IHRoaXMudHlwZSxcbiAgICAgIGRhdGE6IHRoaXMuZGF0YSxcbiAgICAgIGRhdGFMYWJlbHM6IHRoaXMuZGF0YUxhYmVscyxcbiAgICAgIGN1c3RvbU9wdGlvbnM6IHRoaXMuY3VzdG9tT3B0aW9ucyxcbiAgICAgIGFubm90YXRpb25zOiB0aGlzLmFubm90YXRpb25zLFxuICAgICAgaGlnaGxpZ2h0ZWRFbGVtZW50czogdGhpcy5oaWdobGlnaHRlZEVsZW1lbnRzLFxuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVEYXRhKCkge1xuICAgIHRoaXMuY2hhcnRKU1NlcnZpY2UudXBkYXRlRGF0YSh0aGlzLmRhdGEpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVEYXRhTGFiZWxzKCkge1xuICAgIHRoaXMuY2hhcnRKU1NlcnZpY2UudXBkYXRlRGF0YUxhYmVscyh0aGlzLmRhdGFMYWJlbHMpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVUeXBlKCkge1xuICAgIHRoaXMuY2hhcnRKU1NlcnZpY2UudXBkYXRlVHlwZSh0aGlzLnR5cGUsIHRoaXMuY3VzdG9tT3B0aW9ucyk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZUN1c3RvbU9wdGlvbnMoKSB7XG4gICAgdGhpcy5jaGFydEpTU2VydmljZS51cGRhdGVPcHRpb25zKHRoaXMuY3VzdG9tT3B0aW9ucywgdGhpcy50eXBlKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQW5ub3RhdGlvbnMoKSB7XG4gICAgdGhpcy5jaGFydEpTU2VydmljZS51cGRhdGVBbm5vdGF0aW9ucyh0aGlzLmFubm90YXRpb25zKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlSGlnaGxpZ2h0ZWRFbGVtZW50cygpIHtcbiAgICB0aGlzLmNoYXJ0SlNTZXJ2aWNlLnVwZGF0ZUhpZ2hsaWdodGVkRWxlbWVudHModGhpcy5oaWdobGlnaHRlZEVsZW1lbnRzKTtcbiAgfVxuXG4gIHByaXZhdGUgcmVkcmF3Q2hhcnQoKSB7XG4gICAgdGhpcy5jaGFydEpTU2VydmljZS5yZWRyYXdDaGFydCgpO1xuICB9XG59XG4iXX0=
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"ChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"ChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"kirby-chart","providers":[{"__symbolic":"reference","module":"./chart-js/chart-js.service","name":"ChartJSService","line":22,"character":14}],"template":"<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n","styles":[":host div{height:var(--kirby-chart-height,300px);position:relative}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"dataLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"customOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"annotations":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"highlightedElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"_height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":32,"character":3},"arguments":["style.--kirby-chart-height"]}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"canvasElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["chartCanvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./chart-js/chart-js.service","name":"ChartJSService","line":41,"character":38}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"whenElementHasHeightAndWidth":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"updateData":[{"__symbolic":"method"}],"updateDataLabels":[{"__symbolic":"method"}],"updateType":[{"__symbolic":"method"}],"updateCustomOptions":[{"__symbolic":"method"}],"updateAnnotations":[{"__symbolic":"method"}],"updateHighlightedElements":[{"__symbolic":"method"}],"redrawChart":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
|
|
2
2
|
export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
|
|
3
|
-
import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy,
|
|
3
|
+
import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy, Directive, ViewContainerRef, LOCALE_ID, forwardRef, ChangeDetectorRef, TemplateRef, ContentChildren, INJECTOR, Pipe, SkipSelf, APP_INITIALIZER } from '@angular/core';
|
|
4
4
|
import { ModalController as ModalController$1, IonContent, IonHeader, IonToolbar, IonTitle, AnimationController, IonApp, IonicModule, IonRadio, IonFabButton, LoadingController, IonItemSliding, IonTabs, IonFooter, ToastController as ToastController$1 } from '@ionic/angular';
|
|
5
5
|
export { IonRouterOutlet, NavController } from '@ionic/angular';
|
|
6
6
|
import { NavigationEnd, Router, ActivatedRoute, RouterOutlet, ROUTES, NavigationStart, RouterModule } from '@angular/router';
|
|
@@ -3037,6 +3037,41 @@ function isNumberArray(value) {
|
|
|
3037
3037
|
return Array.isArray(value) && value.every((item) => typeof item === 'number');
|
|
3038
3038
|
}
|
|
3039
3039
|
|
|
3040
|
+
class ComponentLoaderDirective {
|
|
3041
|
+
constructor(componentFactoryResolver, viewContainerRef, renderer) {
|
|
3042
|
+
this.componentFactoryResolver = componentFactoryResolver;
|
|
3043
|
+
this.viewContainerRef = viewContainerRef;
|
|
3044
|
+
this.renderer = renderer;
|
|
3045
|
+
}
|
|
3046
|
+
ngOnInit() {
|
|
3047
|
+
this.loadCard();
|
|
3048
|
+
}
|
|
3049
|
+
loadCard() {
|
|
3050
|
+
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
|
|
3051
|
+
this.viewContainerRef.clear();
|
|
3052
|
+
const componentRef = this.viewContainerRef.createComponent(componentFactory);
|
|
3053
|
+
if (componentRef && componentRef.location && componentRef.location.nativeElement) {
|
|
3054
|
+
this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
|
|
3055
|
+
}
|
|
3056
|
+
componentRef.instance.data = this.configuration.data;
|
|
3057
|
+
}
|
|
3058
|
+
}
|
|
3059
|
+
ComponentLoaderDirective.decorators = [
|
|
3060
|
+
{ type: Directive, args: [{
|
|
3061
|
+
selector: '[kirbyLoadComponent]',
|
|
3062
|
+
},] }
|
|
3063
|
+
];
|
|
3064
|
+
/** @nocollapse */
|
|
3065
|
+
ComponentLoaderDirective.ctorParameters = () => [
|
|
3066
|
+
{ type: ComponentFactoryResolver },
|
|
3067
|
+
{ type: ViewContainerRef },
|
|
3068
|
+
{ type: Renderer2 }
|
|
3069
|
+
];
|
|
3070
|
+
ComponentLoaderDirective.propDecorators = {
|
|
3071
|
+
configuration: [{ type: Input, args: ['kirbyLoadComponent',] }],
|
|
3072
|
+
cssClass: [{ type: Input }]
|
|
3073
|
+
};
|
|
3074
|
+
|
|
3040
3075
|
function deepCopy(obj) {
|
|
3041
3076
|
return JSON.parse(JSON.stringify(obj));
|
|
3042
3077
|
}
|
|
@@ -3462,7 +3497,29 @@ class ChartComponent {
|
|
|
3462
3497
|
this._height = typeof value === 'number' ? `${value}px` : value;
|
|
3463
3498
|
}
|
|
3464
3499
|
ngAfterViewInit() {
|
|
3465
|
-
|
|
3500
|
+
/*
|
|
3501
|
+
A chart is not rendered until it has both a height and a width.
|
|
3502
|
+
If ChartComponent is slotted in an ionic component it will
|
|
3503
|
+
not have any height or width on afterViewInit. This will cause
|
|
3504
|
+
the animation to not be played on first draw.
|
|
3505
|
+
*/
|
|
3506
|
+
const canvasElement = this.canvasElement.nativeElement;
|
|
3507
|
+
this.whenElementHasHeightAndWidth(canvasElement).then(() => this.renderChart());
|
|
3508
|
+
}
|
|
3509
|
+
whenElementHasHeightAndWidth(element) {
|
|
3510
|
+
const rectIs2D = ({ width, height }) => height > 0 && width > 0;
|
|
3511
|
+
return new Promise((resolve) => {
|
|
3512
|
+
const initialClientRect = element.getBoundingClientRect();
|
|
3513
|
+
if (rectIs2D(initialClientRect))
|
|
3514
|
+
resolve();
|
|
3515
|
+
const resizeObserver = new ResizeObserverFactory().create(([resizeObserverEntry]) => {
|
|
3516
|
+
if (rectIs2D(resizeObserverEntry.contentRect)) {
|
|
3517
|
+
resizeObserver.unobserve(element);
|
|
3518
|
+
resolve();
|
|
3519
|
+
}
|
|
3520
|
+
});
|
|
3521
|
+
resizeObserver.observe(element);
|
|
3522
|
+
});
|
|
3466
3523
|
}
|
|
3467
3524
|
ngOnChanges(simpleChanges) {
|
|
3468
3525
|
let shouldRedrawChart = false;
|
|
@@ -7350,41 +7407,6 @@ RouterOutletModule.decorators = [
|
|
|
7350
7407
|
},] }
|
|
7351
7408
|
];
|
|
7352
7409
|
|
|
7353
|
-
class ComponentLoaderDirective {
|
|
7354
|
-
constructor(componentFactoryResolver, viewContainerRef, renderer) {
|
|
7355
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
7356
|
-
this.viewContainerRef = viewContainerRef;
|
|
7357
|
-
this.renderer = renderer;
|
|
7358
|
-
}
|
|
7359
|
-
ngOnInit() {
|
|
7360
|
-
this.loadCard();
|
|
7361
|
-
}
|
|
7362
|
-
loadCard() {
|
|
7363
|
-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
|
|
7364
|
-
this.viewContainerRef.clear();
|
|
7365
|
-
const componentRef = this.viewContainerRef.createComponent(componentFactory);
|
|
7366
|
-
if (componentRef && componentRef.location && componentRef.location.nativeElement) {
|
|
7367
|
-
this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
|
|
7368
|
-
}
|
|
7369
|
-
componentRef.instance.data = this.configuration.data;
|
|
7370
|
-
}
|
|
7371
|
-
}
|
|
7372
|
-
ComponentLoaderDirective.decorators = [
|
|
7373
|
-
{ type: Directive, args: [{
|
|
7374
|
-
selector: '[kirbyLoadComponent]',
|
|
7375
|
-
},] }
|
|
7376
|
-
];
|
|
7377
|
-
/** @nocollapse */
|
|
7378
|
-
ComponentLoaderDirective.ctorParameters = () => [
|
|
7379
|
-
{ type: ComponentFactoryResolver },
|
|
7380
|
-
{ type: ViewContainerRef },
|
|
7381
|
-
{ type: Renderer2 }
|
|
7382
|
-
];
|
|
7383
|
-
ComponentLoaderDirective.propDecorators = {
|
|
7384
|
-
configuration: [{ type: Input, args: ['kirbyLoadComponent',] }],
|
|
7385
|
-
cssClass: [{ type: Input }]
|
|
7386
|
-
};
|
|
7387
|
-
|
|
7388
7410
|
var SegmentedControlMode;
|
|
7389
7411
|
(function (SegmentedControlMode) {
|
|
7390
7412
|
SegmentedControlMode["chip"] = "chip";
|