@kirbydesign/designsystem 4.0.17 → 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 */
@@ -9763,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;
@@ -9831,6 +9865,7 @@
         RadioComponent,
         RadioGroupComponent,
         RangeComponent,
+        ElementAsButtonDirective,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -10176,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;