@kirbydesign/designsystem 4.0.12 → 4.0.13

package/bundles/kirbydesign-designsystem.umd.js

@@ -3809,6 +3809,42 @@
         return Array.isArray(value) && value.every(function (item) { return typeof item === 'number'; });
     }
 
+    var ComponentLoaderDirective = /** @class */ (function () {
+        function ComponentLoaderDirective(componentFactoryResolver, viewContainerRef, renderer) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.viewContainerRef = viewContainerRef;
+            this.renderer = renderer;
+        }
+        ComponentLoaderDirective.prototype.ngOnInit = function () {
+            this.loadCard();
+        };
+        ComponentLoaderDirective.prototype.loadCard = function () {
+            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
+            this.viewContainerRef.clear();
+            var componentRef = this.viewContainerRef.createComponent(componentFactory);
+            if (componentRef && componentRef.location && componentRef.location.nativeElement) {
+                this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
+            }
+            componentRef.instance.data = this.configuration.data;
+        };
+        return ComponentLoaderDirective;
+    }());
+    ComponentLoaderDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[kirbyLoadComponent]',
+                },] }
+    ];
+    /** @nocollapse */
+    ComponentLoaderDirective.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: i0.Renderer2 }
+    ]; };
+    ComponentLoaderDirective.propDecorators = {
+        configuration: [{ type: i0.Input, args: ['kirbyLoadComponent',] }],
+        cssClass: [{ type: i0.Input }]
+    };
+
     function deepCopy(obj) {
         return JSON.parse(JSON.stringify(obj));
     }
@@ -4246,7 +4282,34 @@
             configurable: true
         });
         ChartComponent.prototype.ngAfterViewInit = function () {
-            this.renderChart();
+            var _this = this;
+            /*
+               A chart is not rendered until it has both a height and a width.
+               If ChartComponent is slotted in an ionic component it will
+               not have any height or width on afterViewInit. This will cause
+               the animation to not be played on first draw.
+            */
+            var canvasElement = this.canvasElement.nativeElement;
+            this.whenElementHasHeightAndWidth(canvasElement).then(function () { return _this.renderChart(); });
+        };
+        ChartComponent.prototype.whenElementHasHeightAndWidth = function (element) {
+            var rectIs2D = function (_a) {
+                var width = _a.width, height = _a.height;
+                return height > 0 && width > 0;
+            };
+            return new Promise(function (resolve) {
+                var initialClientRect = element.getBoundingClientRect();
+                if (rectIs2D(initialClientRect))
+                    resolve();
+                var resizeObserver = new ResizeObserverFactory().create(function (_a) {
+                    var _b = __read(_a, 1), resizeObserverEntry = _b[0];
+                    if (rectIs2D(resizeObserverEntry.contentRect)) {
+                        resizeObserver.unobserve(element);
+                        resolve();
+                    }
+                });
+                resizeObserver.observe(element);
+            });
         };
         ChartComponent.prototype.ngOnChanges = function (simpleChanges) {
             var _this = this;
@@ -8584,42 +8647,6 @@
                 },] }
     ];
 
-    var ComponentLoaderDirective = /** @class */ (function () {
-        function ComponentLoaderDirective(componentFactoryResolver, viewContainerRef, renderer) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.viewContainerRef = viewContainerRef;
-            this.renderer = renderer;
-        }
-        ComponentLoaderDirective.prototype.ngOnInit = function () {
-            this.loadCard();
-        };
-        ComponentLoaderDirective.prototype.loadCard = function () {
-            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
-            this.viewContainerRef.clear();
-            var componentRef = this.viewContainerRef.createComponent(componentFactory);
-            if (componentRef && componentRef.location && componentRef.location.nativeElement) {
-                this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
-            }
-            componentRef.instance.data = this.configuration.data;
-        };
-        return ComponentLoaderDirective;
-    }());
-    ComponentLoaderDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[kirbyLoadComponent]',
-                },] }
-    ];
-    /** @nocollapse */
-    ComponentLoaderDirective.ctorParameters = function () { return [
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.ViewContainerRef },
-        { type: i0.Renderer2 }
-    ]; };
-    ComponentLoaderDirective.propDecorators = {
-        configuration: [{ type: i0.Input, args: ['kirbyLoadComponent',] }],
-        cssClass: [{ type: i0.Input }]
-    };
-
     (function (SegmentedControlMode) {
         SegmentedControlMode["chip"] = "chip";
         SegmentedControlMode["compactChip"] = "compactChip";