@kirbydesign/designsystem 3.0.15 → 4.0.2

package/fesm2015/kirbydesign-designsystem.js

@@ -1,6 +1,6 @@
 import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy, LOCALE_ID, Directive, forwardRef, ChangeDetectorRef, TemplateRef, ContentChildren, INJECTOR, Pipe, SkipSelf, ViewContainerRef } from '@angular/core';
 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';
-export { NavController } from '@ionic/angular';
+export { IonRouterOutlet, NavController } from '@ionic/angular';
 import { NavigationEnd, Router, ActivatedRoute, RouterOutlet, ROUTES, NavigationStart, RouterModule } from '@angular/router';
 import { of, EMPTY, Subject, merge, fromEvent, ReplaySubject } from 'rxjs';
 import { filter, first, startWith, map, pairwise, debounceTime, takeUntil } from 'rxjs/operators';
@@ -55,6 +55,7 @@ const styles = {
         default: '1',
         segmentBadge: '2',
         dropdown: '800',
+        popover: '850',
         modalOverlay: '900',
         modal: '901',
         loadingOverlay: '1001',
@@ -1114,6 +1115,9 @@ class DesignTokenHelper {
     static itemHeight(key) {
         return styles.itemHeights[key];
     }
+    static zLayer(key) {
+        return styles.zLayers[key];
+    }
 }
 DesignTokenHelper.breakpoints = styles.breakpoints;
 DesignTokenHelper.softKeyboardTransitionEnter = styles.softKeyboardTransitionEnter;
@@ -2628,7 +2632,7 @@ CardComponent.decorators = [
     { type: 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}: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-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 */
@@ -4875,7 +4879,7 @@ ItemComponent.decorators = [
     { type: 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{--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{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 = {
@@ -4939,27 +4943,219 @@ ListFooterDirective.decorators = [
             },] }
 ];
 
+var HorizontalDirection;
+(function (HorizontalDirection) {
+    HorizontalDirection["right"] = "right";
+    HorizontalDirection["left"] = "left";
+})(HorizontalDirection || (HorizontalDirection = {}));
+class PopoverComponent {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        // removeEventListener same instance of event handler & options
+        this.preventScrollEventListenerOptions = {
+            passive: false,
+        };
+        this.POPOVER_BODY_PADDING = 12;
+        this.isShowing = false;
+        this.popout = HorizontalDirection.right;
+        this.willHide = new EventEmitter();
+        this.document = elementRef.nativeElement.ownerDocument;
+    }
+    get targetElement() {
+        if (this.target instanceof ElementRef) {
+            return this.target.nativeElement;
+        }
+        else {
+            return this.target;
+        }
+    }
+    _backdropClick() {
+        this.willHide.emit();
+        this.hide();
+    }
+    _onWindowResize() {
+        if (this.isShowing) {
+            this.willHide.emit();
+            this.hide();
+        }
+    }
+    ngAfterViewInit() {
+        this.placePopoverAboveClosestModal();
+        this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    placePopoverAboveClosestModal() {
+        const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');
+        if (closestIonModal) {
+            this.zIndex = parseInt(closestIonModal.style.zIndex) + 1;
+            this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;
+        }
+        else {
+            this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));
+        }
+    }
+    // document.removeEventListener needs the exact same event handler & options reference:
+    preventEvent(event) {
+        event.preventDefault();
+    }
+    preventScroll() {
+        this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');
+        if (this.isFirstToLockScroll) {
+            this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
+        }
+        // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead
+        this.document.addEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+    }
+    releaseScroll() {
+        if (this.isFirstToLockScroll) {
+            this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
+        }
+        this.document.removeEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+    }
+    show() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');
+        this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+        this.preventScroll();
+        this.positionWrapper();
+        this.renderer.addClass(this.elementRef.nativeElement, 'is-open');
+        this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');
+        this.isShowing = true;
+    }
+    hide() {
+        this.renderer.removeChild(this.document.body, this.elementRef.nativeElement);
+        this.releaseScroll();
+        this.renderer.removeStyle(this.targetElement, 'z-index');
+        this.renderer.removeStyle(this.targetElement, 'pointer-events');
+        this.isShowing = false;
+    }
+    positionWrapper() {
+        const targetDimensions = this.targetElement.getBoundingClientRect();
+        this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+        const wrapperElement = this.wrapperElement.nativeElement;
+        const wrapperDimensions = wrapperElement.getBoundingClientRect();
+        const viewport = wrapperElement.ownerDocument.defaultView;
+        this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+        this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+    }
+    positionHorizontally(viewPort, wrapperElement, targetDimensions, wrapperDimensions) {
+        const viewPortWidth = viewPort.innerWidth;
+        const contentWidth = wrapperDimensions.width;
+        const availableSpaceRight = viewPortWidth - targetDimensions.left;
+        const availableSpaceLeft = targetDimensions.right;
+        const contentCanFitRightOfTarget = availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;
+        const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;
+        const [direction, oppositeDirection] = this.popout === HorizontalDirection.left || !openRight
+            ? ['left', 'right']
+            : ['right', 'left'];
+        const pxValue = direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;
+        this.renderer.removeStyle(wrapperElement, direction);
+        this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);
+    }
+    positionVertically(viewPort, wrapperElement, targetDimensions, wrapperDimensions) {
+        const viewPortHeight = viewPort.innerHeight;
+        const contentHeight = wrapperDimensions.height;
+        const availableSpaceDown = viewPortHeight - targetDimensions.bottom;
+        const availableSpaceUp = targetDimensions.top;
+        const contentCanFitBelowTarget = availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;
+        const isAvailableSpaceBelow = contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;
+        const [direction, oppositeDirection] = isAvailableSpaceBelow
+            ? ['bottom', 'top']
+            : ['top', 'bottom'];
+        const pxValue = direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;
+        this.renderer.removeStyle(wrapperElement, direction);
+        this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);
+        if (direction === 'top') {
+            // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:
+            this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);
+            this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');
+        }
+    }
+}
+PopoverComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kirby-popover',
+                template: `
+    <div #wrapper class="wrapper"><ng-content></ng-content></div>
+  `,
+                styles: [":host{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}"]
+            },] }
+];
+/** @nocollapse */
+PopoverComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+PopoverComponent.propDecorators = {
+    wrapperElement: [{ type: ViewChild, args: ['wrapper', { static: true, read: ElementRef },] }],
+    popout: [{ type: Input }],
+    target: [{ type: Input }],
+    willHide: [{ type: Output }],
+    _backdropClick: [{ type: HostListener, args: ['click',] }],
+    _onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
+};
+
 var OpenState;
 (function (OpenState) {
     OpenState[OpenState["closed"] = 0] = "closed";
     OpenState[OpenState["opening"] = 1] = "opening";
     OpenState[OpenState["open"] = 2] = "open";
 })(OpenState || (OpenState = {}));
-var HorizontalDirection;
-(function (HorizontalDirection) {
-    HorizontalDirection["right"] = "right";
-    HorizontalDirection["left"] = "left";
-})(HorizontalDirection || (HorizontalDirection = {}));
 var VerticalDirection;
 (function (VerticalDirection) {
     VerticalDirection[VerticalDirection["up"] = 0] = "up";
     VerticalDirection[VerticalDirection["down"] = 1] = "down";
 })(VerticalDirection || (VerticalDirection = {}));
+
+class KeyboardHandlerService {
+    handle(event, items, selectedIndex) {
+        let newIndex = -1;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                // Select previous item:
+                newIndex = selectedIndex - 1;
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                if (selectedIndex === undefined) {
+                    // None selected, select first item:
+                    newIndex = 0;
+                }
+                else if (selectedIndex < items.length - 1) {
+                    // Select next item:
+                    newIndex = selectedIndex + 1;
+                }
+                break;
+            case 'Home':
+                // Select first item:
+                newIndex = 0;
+                break;
+            case 'End':
+                // Select last item:
+                newIndex = items.length - 1;
+                break;
+            default:
+                break;
+        }
+        return newIndex;
+    }
+}
+/** @nocollapse */ KeyboardHandlerService.ɵprov = ɵɵdefineInjectable({ factory: function KeyboardHandlerService_Factory() { return new KeyboardHandlerService(); }, token: KeyboardHandlerService, providedIn: "root" });
+KeyboardHandlerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
 class DropdownComponent {
-    constructor(renderer, elementRef, changeDetectorRef) {
+    constructor(renderer, elementRef, changeDetectorRef, keyboardHandlerService) {
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
+        this.keyboardHandlerService = keyboardHandlerService;
         this.state = OpenState.closed;
         this.hasConfiguredSlottedItems = false;
         this.horizontalDirection = HorizontalDirection.right;
@@ -4973,6 +5169,7 @@ class DropdownComponent {
         this.disabled = false;
         this.size = 'md';
         this.tabindex = 0;
+        this.usePopover = false;
         /**
          * Emitted when an item is selected (tap on mobile, click/keypress on web)
          */
@@ -5065,10 +5262,25 @@ class DropdownComponent {
             this.hasConfiguredSlottedItems = true;
         }
     }
+    /* Utility that makes it easier to set styles on card element
+    when using popover*/
+    setPopoverCardStyle(style, value) {
+        if (!this.usePopover)
+            return;
+        this.renderer.setStyle(this.cardElement.nativeElement, style, value, RendererStyleFlags2.DashCase);
+    }
     ngAfterViewInit() {
+        if (this.usePopover && this.expand === 'block') {
+            const { width } = this.elementRef.nativeElement.getBoundingClientRect();
+            this.setPopoverCardStyle('--kirby-card-width', `${width}px`);
+            this.setPopoverCardStyle('max-width', 'initial');
+            this.setPopoverCardStyle('min-width', 'initial');
+        }
         this.initializeAlignment();
     }
     initializeAlignment() {
+        if (this.usePopover)
+            return;
         if (!this.intersectionObserverRef) {
             const options = {
                 rootMargin: '0px',
@@ -5135,13 +5347,16 @@ class DropdownComponent {
         }
     }
     showDropdown() {
+        var _a;
         if (this.state === OpenState.opening) {
             this.state = OpenState.open;
+            (_a = this.popover) === null || _a === void 0 ? void 0 : _a.show();
             this.scrollItemIntoView(this.selectedIndex);
             this.changeDetectorRef.markForCheck();
         }
     }
     close() {
+        var _a;
         if (this.disabled) {
             return;
         }
@@ -5149,6 +5364,7 @@ class DropdownComponent {
             this.state = OpenState.closed;
             // Reset vertical direction to default
             this.verticalDirection = VerticalDirection.down;
+            (_a = this.popover) === null || _a === void 0 ? void 0 : _a.hide();
         }
     }
     onItemSelect(index) {
@@ -5249,12 +5465,17 @@ class DropdownComponent {
             this.elementRef.nativeElement.blur();
         }
     }
-    _onBlur() {
-        if (this.disabled) {
+    _onPopoverWillHide() {
+        this.state = OpenState.closed;
+        this.elementRef.nativeElement.focus();
+    }
+    _onBlur(event) {
+        if (this.disabled)
             return;
-        }
         if (this.isOpen) {
-            this.close();
+            if (!this.cardElement.nativeElement.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
+                this.close();
+            }
         }
         this._onTouched();
     }
@@ -5271,50 +5492,26 @@ class DropdownComponent {
         this.toggle();
     }
     _onArrowKeys(event) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
+        // Mirror default HTML5 select behaviour - prevent left/right arrows when open:
         if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-            // Mirror default HTML5 select behaviour - prevent left/right arrows when open:
             return;
         }
-        event.preventDefault();
-        let newIndex = -1;
-        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-            // Select previous item:
-            newIndex = this.selectedIndex - 1;
-        }
-        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-            if (this.selectedIndex === undefined) {
-                // None selected, select first item:
-                newIndex = 0;
-            }
-            else if (this.selectedIndex < this.items.length - 1) {
-                // Select next item:
-                newIndex = this.selectedIndex + 1;
-            }
-        }
+        const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
         if (newIndex > -1) {
             this.selectItem(newIndex);
         }
+        return false;
     }
     _onHomeEndKeys(event) {
-        event.preventDefault();
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
-        let newIndex = -1;
-        if (event.key === 'Home') {
-            // Select first item:
-            newIndex = 0;
-        }
-        if (event.key === 'End') {
-            // Select last item:
-            newIndex = this.items.length - 1;
-        }
+        const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
         if (newIndex > -1) {
             this.selectItem(newIndex);
         }
+        return false;
     }
     ngOnDestroy() {
         let unlisten;
@@ -5330,7 +5527,7 @@ DropdownComponent.OPEN_DELAY_IN_MS = 100;
 DropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-dropdown',
-                template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n<kirby-card>\n  <ng-container *ngFor=\"let item of items; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemTemplate || defaultItemTemplate;\n        context: { $implicit: item, selected: i === selectedIndex, index: i }\n      \"\n    ></ng-container>\n  </ng-container>\n</kirby-card>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n  <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n    <h3>{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n",
+                template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover [target]=\"buttonElement\" [popout]=\"popout\" (willHide)=\"_onPopoverWillHide()\">\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: { $implicit: item, selected: i === selectedIndex, index: i }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n  <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -5338,14 +5535,15 @@ DropdownComponent.decorators = [
                         multi: true,
                     },
                 ],
-                styles: [":host{--kirby_internal_min-screen-width:320px;display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}@media (min-width:321px){:host{--kirby_internal_min-screen-width:375px}}:host.expand{display:block}:host:not(.expand) kirby-card{min-width:calc(var(--kirby_internal_min-screen-width) - 32px);max-width:calc(100vw - 32px)}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-card{display:none;opacity:0;position:absolute;width:100%;max-height:352px;margin-top:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);z-index:800}:host(.is-opening) kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host(.is-open) kirby-card{display:block;opacity:1}:host(.popout-left) kirby-card{right:0}:host(.popout-up) kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(.popout-up).is-open>button{z-index:801}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
+                styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:0;max-width:none}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height:352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);min-width:288px;max-width:calc(100vw - 32px)}@media (min-width:321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
             },] }
 ];
 /** @nocollapse */
 DropdownComponent.ctorParameters = () => [
     { type: Renderer2 },
     { type: ElementRef },
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: KeyboardHandlerService }
 ];
 DropdownComponent.propDecorators = {
     items: [{ type: Input }],
@@ -5360,6 +5558,7 @@ DropdownComponent.propDecorators = {
     hasError: [{ type: HostBinding, args: ['class.error',] }, { type: Input }],
     size: [{ type: Input }],
     tabindex: [{ type: Input }],
+    usePopover: [{ type: HostBinding, args: ['class.with-popover',] }, { type: Input }],
     _tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
     _noBlurOnScroll: [{ type: HostBinding, args: ['attr.no-blur',] }],
     change: [{ type: Output }],
@@ -5371,13 +5570,15 @@ DropdownComponent.propDecorators = {
     _popoutUp: [{ type: HostBinding, args: ['class.popout-up',] }],
     itemTemplate: [{ type: ContentChild, args: [ListItemTemplateDirective, { static: true, read: TemplateRef },] }],
     slottedItems: [{ type: ContentChildren, args: [ListItemTemplateDirective, { read: ElementRef },] }],
-    cardElement: [{ type: ViewChild, args: [CardComponent, { static: true, read: ElementRef },] }],
+    cardElement: [{ type: ViewChild, args: [CardComponent, { read: ElementRef },] }],
+    popover: [{ type: ViewChild, args: [PopoverComponent,] }],
+    buttonElement: [{ type: ViewChild, args: [ButtonComponent, { static: true, read: ElementRef },] }],
     kirbyItemsDefault: [{ type: ViewChildren, args: [ItemComponent, { read: ElementRef },] }],
     kirbyItemsSlotted: [{ type: ContentChildren, args: [ItemComponent, { read: ElementRef },] }],
     _onTab: [{ type: HostListener, args: ['keydown.tab', ['$event'],] }],
     _onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
     _onFocus: [{ type: HostListener, args: ['focus',] }],
-    _onBlur: [{ type: HostListener, args: ['keydown.enter',] }, { type: HostListener, args: ['keydown.escape',] }, { type: HostListener, args: ['blur',] }],
+    _onBlur: [{ type: HostListener, args: ['keydown.enter',] }, { type: HostListener, args: ['keydown.escape',] }, { type: HostListener, args: ['blur', ['$event'],] }],
     _onSpace: [{ type: HostListener, args: ['keydown.space', ['$event'],] }],
     _onEnter: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }],
     _onArrowKeys: [{ type: HostListener, args: ['keydown.arrowup', ['$event'],] }, { type: HostListener, args: ['keydown.arrowdown', ['$event'],] }, { type: HostListener, args: ['keydown.arrowleft', ['$event'],] }, { type: HostListener, args: ['keydown.arrowright', ['$event'],] }],
@@ -8584,6 +8785,7 @@ const declarations$1 = [
     ModalWrapperComponent,
     ModalCompactWrapperComponent,
     ProgressCircleRingComponent,
+    PopoverComponent,
 ];
 const exportedModules = [
     AppModule,
@@ -8664,5 +8866,5 @@ KirbyModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ColorHelper, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DesignTokenHelper, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, camelToKebabCase, capitalizeFirstLetter, defaultIcons, isNumberArray, kebabToCamelCase, kebabToTitleCase, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, AppModule as ɵa, AppComponent as ɵb, Modal as ɵba, ButtonComponent as ɵbb, IconComponent as ɵbc, IconRegistryService as ɵbd, ICON_SETTINGS as ɵbf, ResizeObserverService as ɵbg, ResizeObserverFactory as ɵbh, FitHeadingModule as ɵbi, FitHeadingDirective as ɵbj, LineClampHelper as ɵbk, TabsModule as ɵbl, IconModule as ɵbm, TabButtonComponent as ɵbn, ItemModule as ɵbo, ItemComponent as ɵbp, LabelComponent as ɵbq, ToggleButtonModule as ɵbr, ToggleButtonComponent as ɵbs, ListModule as ɵbt, ListComponent as ɵbu, ListHelper as ɵbv, GroupByPipe as ɵbw, InfiniteScrollDirective as ɵbx, ListItemDirective as ɵby, ListFlexItemDirective as ɵbz, RouterOutletComponent as ɵc, ListItemTemplateDirective as ɵca, ListHeaderDirective as ɵcb, ListSectionHeaderDirective as ɵcc, ListFooterDirective as ɵcd, ListItemComponent as ɵce, ListSectionHeaderComponent as ɵcf, ListHeaderComponent as ɵcg, ListItemColorDirective as ɵch, SpinnerModule as ɵci, SpinnerComponent as ɵcj, ChartModule as ɵck, ChartComponent as ɵcl, ChartJSService as ɵcm, ChartConfigService as ɵcn, CardComponent as ɵco, CardHeaderComponent as ɵcp, CardFooterComponent as ɵcq, ChartDeprecatedComponent as ɵcr, ChartDeprecatedHelper as ɵcs, DONUT_OPTIONS as ɵct, DonutOptions as ɵcu, AREASPLINE_OPTIONS as ɵcv, AreaSplineOptions as ɵcw, TIMESERIES_OPTIONS as ɵcx, TimeSeriesOptions as ɵcy, ACTIVITYGAUGE_OPTIONS as ɵcz, ModalController as ɵd, ActivityGaugeOptions as ɵda, StockChartDeprecatedComponent as ɵdb, GridComponent as ɵdc, BreakpointHelperService as ɵdd, ComponentLoaderDirective as ɵde, AvatarComponent as ɵdf, CalendarComponent as ɵdg, CalendarHelper as ɵdh, CheckboxComponent as ɵdi, ActionSheetComponent as ɵdj, ModalFooterComponent as ɵdk, ModalRouterLinkDirective as ɵdl, SegmentedControlComponent as ɵdm, ChipComponent as ɵdn, BadgeComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalHelper as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, LoadingOverlayComponent as ɵef, ProgressCircleComponent as ɵeg, FlagComponent as ɵeh, SlideDirective as ɵei, SlidesComponent as ɵej, AccordionDirective as ɵek, AccordionItemComponent as ɵel, RangeComponent as ɵem, KeyHandlerDirective as ɵen, FormFieldMessageComponent as ɵeo, AlertComponent as ɵep, ModalCompactWrapperComponent as ɵeq, ProgressCircleRingComponent as ɵer, ToastHelper as ɵes, ToastController as ɵet, LoadingOverlayService as ɵeu, ModalAnimationBuilderService as ɵf, PlatformService as ɵg, WindowRef as ɵh, ActionSheetHelper as ɵi, AlertHelper as ɵj, ModalNavigationService as ɵk, RouterOutletModule as ɵl, PageModule as ɵm, PageTitleDirective as ɵn, PageToolbarTitleDirective as ɵo, PageActionsDirective as ɵp, PageContentDirective as ɵq, PageProgressComponent as ɵr, PageTitleComponent as ɵs, PageContentComponent as ɵt, PageActionsComponent as ɵu, PageComponent as ɵv, TabsComponent as ɵw, TabsService as ɵx, PageFooterComponent as ɵy, ModalWrapperComponent as ɵz };
+export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ColorHelper, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DesignTokenHelper, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, camelToKebabCase, capitalizeFirstLetter, defaultIcons, isNumberArray, kebabToCamelCase, kebabToTitleCase, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, AppModule as ɵa, AppComponent as ɵb, Modal as ɵba, ButtonComponent as ɵbb, IconComponent as ɵbc, IconRegistryService as ɵbd, ICON_SETTINGS as ɵbf, ResizeObserverService as ɵbg, ResizeObserverFactory as ɵbh, FitHeadingModule as ɵbi, FitHeadingDirective as ɵbj, LineClampHelper as ɵbk, TabsModule as ɵbl, IconModule as ɵbm, TabButtonComponent as ɵbn, ItemModule as ɵbo, ItemComponent as ɵbp, LabelComponent as ɵbq, ToggleButtonModule as ɵbr, ToggleButtonComponent as ɵbs, ListModule as ɵbt, ListComponent as ɵbu, ListHelper as ɵbv, GroupByPipe as ɵbw, InfiniteScrollDirective as ɵbx, ListItemDirective as ɵby, ListFlexItemDirective as ɵbz, RouterOutletComponent as ɵc, ListItemTemplateDirective as ɵca, ListHeaderDirective as ɵcb, ListSectionHeaderDirective as ɵcc, ListFooterDirective as ɵcd, ListItemComponent as ɵce, ListSectionHeaderComponent as ɵcf, ListHeaderComponent as ɵcg, ListItemColorDirective as ɵch, SpinnerModule as ɵci, SpinnerComponent as ɵcj, ChartModule as ɵck, ChartComponent as ɵcl, ChartJSService as ɵcm, ChartConfigService as ɵcn, CardComponent as ɵco, CardHeaderComponent as ɵcp, CardFooterComponent as ɵcq, ChartDeprecatedComponent as ɵcr, ChartDeprecatedHelper as ɵcs, DONUT_OPTIONS as ɵct, DonutOptions as ɵcu, AREASPLINE_OPTIONS as ɵcv, AreaSplineOptions as ɵcw, TIMESERIES_OPTIONS as ɵcx, TimeSeriesOptions as ɵcy, ACTIVITYGAUGE_OPTIONS as ɵcz, ModalController as ɵd, ActivityGaugeOptions as ɵda, StockChartDeprecatedComponent as ɵdb, GridComponent as ɵdc, BreakpointHelperService as ɵdd, ComponentLoaderDirective as ɵde, AvatarComponent as ɵdf, CalendarComponent as ɵdg, CalendarHelper as ɵdh, CheckboxComponent as ɵdi, ActionSheetComponent as ɵdj, ModalFooterComponent as ɵdk, ModalRouterLinkDirective as ɵdl, SegmentedControlComponent as ɵdm, ChipComponent as ɵdn, BadgeComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalHelper as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, PopoverComponent as ɵef, KeyboardHandlerService as ɵeg, LoadingOverlayComponent as ɵeh, ProgressCircleComponent as ɵei, FlagComponent as ɵej, SlideDirective as ɵek, SlidesComponent as ɵel, AccordionDirective as ɵem, AccordionItemComponent as ɵen, RangeComponent as ɵeo, KeyHandlerDirective as ɵep, FormFieldMessageComponent as ɵeq, AlertComponent as ɵer, ModalCompactWrapperComponent as ɵes, ProgressCircleRingComponent as ɵet, ToastHelper as ɵeu, ToastController as ɵev, LoadingOverlayService as ɵew, ModalAnimationBuilderService as ɵf, PlatformService as ɵg, WindowRef as ɵh, ActionSheetHelper as ɵi, AlertHelper as ɵj, ModalNavigationService as ɵk, RouterOutletModule as ɵl, PageModule as ɵm, PageTitleDirective as ɵn, PageToolbarTitleDirective as ɵo, PageActionsDirective as ɵp, PageContentDirective as ɵq, PageProgressComponent as ɵr, PageTitleComponent as ɵs, PageContentComponent as ɵt, PageActionsComponent as ɵu, PageComponent as ɵv, TabsComponent as ɵw, TabsService as ɵx, PageFooterComponent as ɵy, ModalWrapperComponent as ɵz };
 //# sourceMappingURL=kirbydesign-designsystem.js.map