@kirbydesign/designsystem 4.0.14 → 4.0.18

package/bundles/kirbydesign-designsystem.umd.js

@@ -2881,7 +2881,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-card',
                     template: "<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n",
-                    styles: [":host{--kirby-card-main-background-color:var(--kirby-white);--kirby-card-main-color:var(--kirby-white-contrast);--kirby-card-footer-background-color:var(--kirby-white);--kirby-card-footer-color:var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width,auto)}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host.flat{box-shadow:none}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color:var(--kirby-primary);--kirby-card-main-color:var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color:var(--kirby-secondary);--kirby-card-main-color:var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color:var(--kirby-tertiary);--kirby-card-main-color:var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color:var(--kirby-success);--kirby-card-main-color:var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color:var(--kirby-warning);--kirby-card-main-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color:var(--kirby-danger);--kirby-card-main-color:var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color:var(--kirby-light);--kirby-card-main-color:var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color:var(--kirby-medium);--kirby-card-main-color:var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color:var(--kirby-dark);--kirby-card-main-color:var(--kirby-dark-contrast)}"]
+                    styles: [":host{--kirby-card-main-background-color:var(--kirby-white);--kirby-card-main-color:var(--kirby-white-contrast);--kirby-card-footer-background-color:var(--kirby-white);--kirby-card-footer-color:var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width,auto)}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host.flat{box-shadow:none}:host[role=button]{cursor:pointer;outline-offset:2px}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color:var(--kirby-primary);--kirby-card-main-color:var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color:var(--kirby-secondary);--kirby-card-main-color:var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color:var(--kirby-tertiary);--kirby-card-main-color:var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color:var(--kirby-success);--kirby-card-main-color:var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color:var(--kirby-warning);--kirby-card-main-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color:var(--kirby-danger);--kirby-card-main-color:var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color:var(--kirby-light);--kirby-card-main-color:var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color:var(--kirby-medium);--kirby-card-main-color:var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color:var(--kirby-dark);--kirby-card-main-color:var(--kirby-dark-contrast)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7901,7 +7901,8 @@
     }());
 
     var ReorderListComponent = /** @class */ (function () {
-        function ReorderListComponent() {
+        function ReorderListComponent(cdr) {
+            this.cdr = cdr;
             this.itemReorder = new i0.EventEmitter();
             this.subItemReorder = new i0.EventEmitter();
             this.reorderActive = false;
@@ -7933,6 +7934,7 @@
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
+                _this.cdr.detectChanges();
             };
             this.observer = new MutationObserver(callback);
             this.reorderGroupContainer.forEach(function (div) {
@@ -7965,6 +7967,10 @@
                     styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.outerGroup{border-bottom:20px solid transparent}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}"]
                 },] }
     ];
+    /** @nocollapse */
+    ReorderListComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     ReorderListComponent.propDecorators = {
         items: [{ type: i0.Input }],
         subItemsName: [{ type: i0.Input }],
@@ -8687,7 +8693,7 @@
                 var _this = this;
                 this._items = value || [];
                 this._items.forEach(function (item) {
-                    if (item.badge === undefined)
+                    if (!item.badge)
                         return;
                     // We need to verify whether badges icon is custom or default, so we can check for it in the template
                     item.badge.isCustomIcon =
@@ -8875,7 +8881,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-tab-button',
                     template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n",
-                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-left:calc(50% + 5px);--kirby-badge-top:0}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row;--kirby-badge-top:-5px;--kirby-badge-left:auto;--kirby-badge-right:-5px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{position:relative;margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
+                    styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
                 },] }
     ];
     /** @nocollapse */
@@ -9757,6 +9763,40 @@
         };
     }
 
+    var ElementAsButtonDirective = /** @class */ (function () {
+        function ElementAsButtonDirective(card, clickableElement) {
+            this.card = card;
+            this.clickableElement = clickableElement;
+            this.role = 'button';
+            this.tabindex = 0;
+        }
+        ElementAsButtonDirective.prototype.ngOnInit = function () {
+            if (this.card) {
+                this.card.flat = false;
+            }
+        };
+        ElementAsButtonDirective.prototype._onKeydownHandler = function (event) {
+            this.clickableElement.nativeElement.click(event);
+        };
+        return ElementAsButtonDirective;
+    }());
+    ElementAsButtonDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // tslint:disable-next-line
+                    selector: 'kirby-card[click]',
+                },] }
+    ];
+    /** @nocollapse */
+    ElementAsButtonDirective.ctorParameters = function () { return [
+        { type: CardComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ElementRef }
+    ]; };
+    ElementAsButtonDirective.propDecorators = {
+        role: [{ type: i0.HostBinding, args: ['attr.role',] }],
+        tabindex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
+        _onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.space', ['$event'],] }, { type: i0.HostListener, args: ['keydown.enter', ['$event'],] }]
+    };
+
     var ModalRouterLinkDirective = /** @class */ (function () {
         function ModalRouterLinkDirective(modalNavigationService) {
             this.modalNavigationService = modalNavigationService;
@@ -9825,6 +9865,7 @@
         RadioComponent,
         RadioGroupComponent,
         RangeComponent,
+        ElementAsButtonDirective,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -10170,16 +10211,17 @@
     exports.ɵem = AccordionDirective;
     exports.ɵen = AccordionItemComponent;
     exports.ɵeo = RangeComponent;
-    exports.ɵep = KeyHandlerDirective;
-    exports.ɵeq = FormFieldMessageComponent;
-    exports.ɵer = AlertComponent;
-    exports.ɵes = ModalCompactWrapperComponent;
-    exports.ɵet = ProgressCircleRingComponent;
-    exports.ɵeu = ToastHelper;
-    exports.ɵev = ToastController;
-    exports.ɵew = LoadingOverlayService;
-    exports.ɵex = appInitialize;
-    exports.ɵey = customElementsInitializer;
+    exports.ɵep = ElementAsButtonDirective;
+    exports.ɵeq = KeyHandlerDirective;
+    exports.ɵer = FormFieldMessageComponent;
+    exports.ɵes = AlertComponent;
+    exports.ɵet = ModalCompactWrapperComponent;
+    exports.ɵeu = ProgressCircleRingComponent;
+    exports.ɵev = ToastHelper;
+    exports.ɵew = ToastController;
+    exports.ɵex = LoadingOverlayService;
+    exports.ɵey = appInitialize;
+    exports.ɵez = customElementsInitializer;
     exports.ɵf = ModalHelper;
     exports.ɵg = ModalAnimationBuilderService;
     exports.ɵh = PlatformService;