@kirbydesign/designsystem 5.0.22 → 5.1.1

package/bundles/kirbydesign-designsystem.umd.js

@@ -4746,6 +4746,7 @@
         function ChartComponent(chartJSService) {
             this.chartJSService = chartJSService;
             this.type = 'column';
+            this.chartHasBeenRendered = false;
         }
         Object.defineProperty(ChartComponent.prototype, "labels", {
             get: function () {
@@ -4804,28 +4805,31 @@
         };
         ChartComponent.prototype.ngOnChanges = function (simpleChanges) {
             var _this = this;
-            var shouldRedrawChart = false;
-            // TODO: Remove 'dataLabels' key when the input property is removed
-            var keyUpdateFnPairs = {
-                data: function () { return _this.updateData(); },
-                dataLabels: function () { return _this.updateLabels(); },
-                labels: function () { return _this.updateLabels(); },
-                type: function () { return _this.updateType(); },
-                customOptions: function () { return _this.updateCustomOptions(); },
-                annotations: function () { return _this.updateAnnotations(); },
-                highlightedElements: function () { return _this.updateHighlightedElements(); },
-            };
-            Object.entries(simpleChanges).forEach(function (_a) {
-                var _b = __read(_a, 1), key = _b[0];
-                if (simpleChanges[key].firstChange || !keyUpdateFnPairs[key])
-                    return;
-                shouldRedrawChart = true;
-                keyUpdateFnPairs[key]();
-            });
-            if (shouldRedrawChart)
-                this.redrawChart();
+            if (this.chartHasBeenRendered) {
+                var shouldRedrawChart_1 = false;
+                // TODO: Remove 'dataLabels' key when the input property is removed
+                var keyUpdateFnPairs_1 = {
+                    data: function () { return _this.updateData(); },
+                    dataLabels: function () { return _this.updateLabels(); },
+                    labels: function () { return _this.updateLabels(); },
+                    type: function () { return _this.updateType(); },
+                    customOptions: function () { return _this.updateCustomOptions(); },
+                    annotations: function () { return _this.updateAnnotations(); },
+                    highlightedElements: function () { return _this.updateHighlightedElements(); },
+                };
+                Object.entries(simpleChanges).forEach(function (_a) {
+                    var _b = __read(_a, 1), key = _b[0];
+                    if (simpleChanges[key].firstChange || !keyUpdateFnPairs_1[key])
+                        return;
+                    shouldRedrawChart_1 = true;
+                    keyUpdateFnPairs_1[key]();
+                });
+                if (shouldRedrawChart_1)
+                    this.redrawChart();
+            }
         };
         ChartComponent.prototype.renderChart = function () {
+            this.chartHasBeenRendered = true;
             this.chartJSService.renderChart({
                 targetElement: this.canvasElement,
                 type: this.type,
@@ -5712,7 +5716,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-item-sliding',
                     template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\n",
-                    styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option{min-width:92px}"]
+                    styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}ion-item-option{min-width:92px}"]
                 },] }
     ];
     ItemSlidingComponent.propDecorators = {
@@ -5853,7 +5857,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-item',
                     template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n",
-                    styles: [":host{display:block;position:relative}:host ion-item{font-size:14px;--min-height:56px;--padding-start:16px;--inner-padding-top:8px;--inner-padding-bottom:8px;--inner-padding-end:16px;--background:var(--kirby-item-background,var(--kirby-white));--background-activated:var(--kirby-item-background-activated,var(--kirby-white-shade));--background-activated-opacity:0.99;--background-focused:var(--kirby-item-background-focused,var(--kirby-background-color));--background-focused-opacity:1;--background-hover:var(--kirby-item-background-hover,var(--kirby-background-color));--background-hover-opacity:1}@media screen and (orientation:landscape){:host ion-item{--ion-safe-area-left:0px;--ion-safe-area-right:0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>data,:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>data.kirby-text-bold,:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[detail],:host ion-item ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height:44px}:host.xs ion-item{--min-height:32px;--inner-padding-top:4px;--inner-padding-bottom:4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height:44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top:8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top:0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom:8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom:0}:host(.selected) ion-item ::ng-deep>data,:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius:16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}"]
+                    styles: [":host{display:block;position:relative}:host ion-item{--padding-top:var(--item-padding-top);--padding-bottom:var(--item-padding-bottom);font-size:14px;--min-height:56px;--padding-start:16px;--inner-padding-top:8px;--inner-padding-bottom:8px;--inner-padding-end:16px;--background:var(--kirby-item-background,var(--kirby-white));--background-activated:var(--kirby-item-background-activated,var(--kirby-white-shade));--background-activated-opacity:0.99;--background-focused:var(--kirby-item-background-focused,var(--kirby-background-color));--background-focused-opacity:1;--background-hover:var(--kirby-item-background-hover,var(--kirby-background-color));--background-hover-opacity:1}@media screen and (orientation:landscape){:host ion-item{--ion-safe-area-left:0px;--ion-safe-area-right:0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>data,:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>data.kirby-text-bold,:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[detail],:host ion-item ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height:44px}:host.xs ion-item{--min-height:32px;--inner-padding-top:4px;--inner-padding-bottom:4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height:44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top:8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top:0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom:8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom:0}:host(.selected) ion-item ::ng-deep>data,:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius:16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}"]
                 },] }
     ];
     ItemComponent.propDecorators = {
@@ -8382,7 +8386,8 @@
     ListExperimentalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-list-experimental',
-                    template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
+                    template: "<ng-content select=\"[outside]\"></ng-content>\n<div class=\"rounded shadow first-item-padding last-item-padding\">\n  <ng-content></ng-content>\n</div>\n",
+                    styles: [".rounded{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.shadow{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}.first-item-padding>::ng-deep :first-child{--item-padding-top:8px}.last-item-padding>::ng-deep :last-child{--item-padding-bottom:8px}.first-item{border-top-left-radius:16px;border-top-right-radius:16px;overflow:hidden}.first-item>::ng-deep :first-child{--item-padding-top:8px}.last-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.last-item>::ng-deep :last-child{--item-padding-bottom:8px}:host{display:block}"]
                 },] }
     ];
     ListExperimentalComponent.propDecorators = {
@@ -8493,6 +8498,7 @@
     var ModalFooterComponent = /** @class */ (function () {
         function ModalFooterComponent() {
             this.snapToKeyboard = false;
+            this.type = 'fixed';
         }
         return ModalFooterComponent;
     }());
@@ -8500,11 +8506,12 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-modal-footer',
                     template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n",
-                    styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}"]
+                    styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}"]
                 },] }
     ];
     ModalFooterComponent.propDecorators = {
-        snapToKeyboard: [{ type: i0.HostBinding, args: ['class.snap-to-keyboard',] }, { type: i0.Input }]
+        snapToKeyboard: [{ type: i0.HostBinding, args: ['class.snap-to-keyboard',] }, { type: i0.Input }],
+        type: [{ type: i0.HostBinding, args: ['class',] }, { type: i0.Input }]
     };
 
     var selectedTabClickEvent = 'kirbySelectedTabClick';