@kirbydesign/designsystem 4.0.1 → 4.0.2

package/bundles/kirbydesign-designsystem.umd.js

@@ -64,6 +64,7 @@
             default: '1',
             segmentBadge: '2',
             dropdown: '800',
+            popover: '850',
             modalOverlay: '900',
             modal: '901',
             loadingOverlay: '1001',
@@ -1615,6 +1616,9 @@
         DesignTokenHelper.itemHeight = function (key) {
             return styles.itemHeights[key];
         };
+        DesignTokenHelper.zLayer = function (key) {
+            return styles.zLayers[key];
+        };
         return DesignTokenHelper;
     }());
     DesignTokenHelper.breakpoints = styles.breakpoints;
@@ -3407,7 +3411,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}: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 */
@@ -5782,7 +5786,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{--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 = {
@@ -5860,26 +5864,224 @@
                 },] }
     ];
 
+    (function (HorizontalDirection) {
+        HorizontalDirection["right"] = "right";
+        HorizontalDirection["left"] = "left";
+    })(exports.HorizontalDirection || (exports.HorizontalDirection = {}));
+    var PopoverComponent = /** @class */ (function () {
+        function PopoverComponent(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 = exports.HorizontalDirection.right;
+            this.willHide = new i0.EventEmitter();
+            this.document = elementRef.nativeElement.ownerDocument;
+        }
+        Object.defineProperty(PopoverComponent.prototype, "targetElement", {
+            get: function () {
+                if (this.target instanceof i0.ElementRef) {
+                    return this.target.nativeElement;
+                }
+                else {
+                    return this.target;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PopoverComponent.prototype._backdropClick = function () {
+            this.willHide.emit();
+            this.hide();
+        };
+        PopoverComponent.prototype._onWindowResize = function () {
+            if (this.isShowing) {
+                this.willHide.emit();
+                this.hide();
+            }
+        };
+        PopoverComponent.prototype.ngAfterViewInit = function () {
+            this.placePopoverAboveClosestModal();
+            this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.elementRef.nativeElement);
+        };
+        PopoverComponent.prototype.ngOnDestroy = function () {
+            this.hide();
+        };
+        PopoverComponent.prototype.placePopoverAboveClosestModal = function () {
+            var 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:
+        PopoverComponent.prototype.preventEvent = function (event) {
+            event.preventDefault();
+        };
+        PopoverComponent.prototype.preventScroll = function () {
+            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);
+        };
+        PopoverComponent.prototype.releaseScroll = function () {
+            if (this.isFirstToLockScroll) {
+                this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
+            }
+            this.document.removeEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+        };
+        PopoverComponent.prototype.show = function () {
+            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;
+        };
+        PopoverComponent.prototype.hide = function () {
+            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;
+        };
+        PopoverComponent.prototype.positionWrapper = function () {
+            var targetDimensions = this.targetElement.getBoundingClientRect();
+            this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+            var wrapperElement = this.wrapperElement.nativeElement;
+            var wrapperDimensions = wrapperElement.getBoundingClientRect();
+            var viewport = wrapperElement.ownerDocument.defaultView;
+            this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+            this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+        };
+        PopoverComponent.prototype.positionHorizontally = function (viewPort, wrapperElement, targetDimensions, wrapperDimensions) {
+            var viewPortWidth = viewPort.innerWidth;
+            var contentWidth = wrapperDimensions.width;
+            var availableSpaceRight = viewPortWidth - targetDimensions.left;
+            var availableSpaceLeft = targetDimensions.right;
+            var contentCanFitRightOfTarget = availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;
+            var openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;
+            var _a = __read(this.popout === exports.HorizontalDirection.left || !openRight
+                ? ['left', 'right']
+                : ['right', 'left'], 2), direction = _a[0], oppositeDirection = _a[1];
+            var pxValue = direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;
+            this.renderer.removeStyle(wrapperElement, direction);
+            this.renderer.setStyle(wrapperElement, oppositeDirection, pxValue + "px");
+        };
+        PopoverComponent.prototype.positionVertically = function (viewPort, wrapperElement, targetDimensions, wrapperDimensions) {
+            var viewPortHeight = viewPort.innerHeight;
+            var contentHeight = wrapperDimensions.height;
+            var availableSpaceDown = viewPortHeight - targetDimensions.bottom;
+            var availableSpaceUp = targetDimensions.top;
+            var contentCanFitBelowTarget = availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;
+            var isAvailableSpaceBelow = contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;
+            var _a = __read(isAvailableSpaceBelow
+                ? ['bottom', 'top']
+                : ['top', 'bottom'], 2), direction = _a[0], oppositeDirection = _a[1];
+            var 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');
+            }
+        };
+        return PopoverComponent;
+    }());
+    PopoverComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-popover',
+                    template: "\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  ",
+                    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 = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    PopoverComponent.propDecorators = {
+        wrapperElement: [{ type: i0.ViewChild, args: ['wrapper', { static: true, read: i0.ElementRef },] }],
+        popout: [{ type: i0.Input }],
+        target: [{ type: i0.Input }],
+        willHide: [{ type: i0.Output }],
+        _backdropClick: [{ type: i0.HostListener, args: ['click',] }],
+        _onWindowResize: [{ type: i0.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 = {}));
-    (function (HorizontalDirection) {
-        HorizontalDirection["right"] = "right";
-        HorizontalDirection["left"] = "left";
-    })(exports.HorizontalDirection || (exports.HorizontalDirection = {}));
     var VerticalDirection;
     (function (VerticalDirection) {
         VerticalDirection[VerticalDirection["up"] = 0] = "up";
         VerticalDirection[VerticalDirection["down"] = 1] = "down";
     })(VerticalDirection || (VerticalDirection = {}));
+
+    var KeyboardHandlerService = /** @class */ (function () {
+        function KeyboardHandlerService() {
+        }
+        KeyboardHandlerService.prototype.handle = function (event, items, selectedIndex) {
+            var 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;
+        };
+        return KeyboardHandlerService;
+    }());
+    /** @nocollapse */ KeyboardHandlerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function KeyboardHandlerService_Factory() { return new KeyboardHandlerService(); }, token: KeyboardHandlerService, providedIn: "root" });
+    KeyboardHandlerService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+
     var DropdownComponent = /** @class */ (function () {
-        function DropdownComponent(renderer, elementRef, changeDetectorRef) {
+        function DropdownComponent(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 = exports.HorizontalDirection.right;
@@ -5893,6 +6095,7 @@
             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)
              */
@@ -6038,11 +6241,26 @@
                 this.hasConfiguredSlottedItems = true;
             }
         };
+        /* Utility that makes it easier to set styles on card element
+        when using popover*/
+        DropdownComponent.prototype.setPopoverCardStyle = function (style, value) {
+            if (!this.usePopover)
+                return;
+            this.renderer.setStyle(this.cardElement.nativeElement, style, value, i0.RendererStyleFlags2.DashCase);
+        };
         DropdownComponent.prototype.ngAfterViewInit = function () {
+            if (this.usePopover && this.expand === 'block') {
+                var width = this.elementRef.nativeElement.getBoundingClientRect().width;
+                this.setPopoverCardStyle('--kirby-card-width', width + "px");
+                this.setPopoverCardStyle('max-width', 'initial');
+                this.setPopoverCardStyle('min-width', 'initial');
+            }
             this.initializeAlignment();
         };
         DropdownComponent.prototype.initializeAlignment = function () {
             var _this = this;
+            if (this.usePopover)
+                return;
             if (!this.intersectionObserverRef) {
                 var options = {
                     rootMargin: '0px',
@@ -6110,13 +6328,16 @@
             }
         };
         DropdownComponent.prototype.showDropdown = function () {
+            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();
             }
         };
         DropdownComponent.prototype.close = function () {
+            var _a;
             if (this.disabled) {
                 return;
             }
@@ -6124,6 +6345,7 @@
                 this.state = OpenState.closed;
                 // Reset vertical direction to default
                 this.verticalDirection = VerticalDirection.down;
+                (_a = this.popover) === null || _a === void 0 ? void 0 : _a.hide();
             }
         };
         DropdownComponent.prototype.onItemSelect = function (index) {
@@ -6224,12 +6446,17 @@
                 this.elementRef.nativeElement.blur();
             }
         };
-        DropdownComponent.prototype._onBlur = function () {
-            if (this.disabled) {
+        DropdownComponent.prototype._onPopoverWillHide = function () {
+            this.state = OpenState.closed;
+            this.elementRef.nativeElement.focus();
+        };
+        DropdownComponent.prototype._onBlur = function (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();
         };
@@ -6246,50 +6473,26 @@
             this.toggle();
         };
         DropdownComponent.prototype._onArrowKeys = function (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();
-            var 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;
-                }
-            }
+            var newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
             if (newIndex > -1) {
                 this.selectItem(newIndex);
             }
+            return false;
         };
         DropdownComponent.prototype._onHomeEndKeys = function (event) {
-            event.preventDefault();
-            if (this.disabled) {
+            if (this.disabled)
                 return;
-            }
-            var newIndex = -1;
-            if (event.key === 'Home') {
-                // Select first item:
-                newIndex = 0;
-            }
-            if (event.key === 'End') {
-                // Select last item:
-                newIndex = this.items.length - 1;
-            }
+            var newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
             if (newIndex > -1) {
                 this.selectItem(newIndex);
             }
+            return false;
         };
         DropdownComponent.prototype.ngOnDestroy = function () {
             var unlisten;
@@ -6306,7 +6509,7 @@
     DropdownComponent.decorators = [
         { type: i0.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: forms.NG_VALUE_ACCESSOR,
@@ -6314,14 +6517,15 @@
                             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 = function () { return [
         { type: i0.Renderer2 },
         { type: i0.ElementRef },
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: KeyboardHandlerService }
     ]; };
     DropdownComponent.propDecorators = {
         items: [{ type: i0.Input }],
@@ -6336,6 +6540,7 @@
         hasError: [{ type: i0.HostBinding, args: ['class.error',] }, { type: i0.Input }],
         size: [{ type: i0.Input }],
         tabindex: [{ type: i0.Input }],
+        usePopover: [{ type: i0.HostBinding, args: ['class.with-popover',] }, { type: i0.Input }],
         _tabindex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
         _noBlurOnScroll: [{ type: i0.HostBinding, args: ['attr.no-blur',] }],
         change: [{ type: i0.Output }],
@@ -6347,13 +6552,15 @@
         _popoutUp: [{ type: i0.HostBinding, args: ['class.popout-up',] }],
         itemTemplate: [{ type: i0.ContentChild, args: [ListItemTemplateDirective, { static: true, read: i0.TemplateRef },] }],
         slottedItems: [{ type: i0.ContentChildren, args: [ListItemTemplateDirective, { read: i0.ElementRef },] }],
-        cardElement: [{ type: i0.ViewChild, args: [CardComponent, { static: true, read: i0.ElementRef },] }],
+        cardElement: [{ type: i0.ViewChild, args: [CardComponent, { read: i0.ElementRef },] }],
+        popover: [{ type: i0.ViewChild, args: [PopoverComponent,] }],
+        buttonElement: [{ type: i0.ViewChild, args: [ButtonComponent, { static: true, read: i0.ElementRef },] }],
         kirbyItemsDefault: [{ type: i0.ViewChildren, args: [ItemComponent, { read: i0.ElementRef },] }],
         kirbyItemsSlotted: [{ type: i0.ContentChildren, args: [ItemComponent, { read: i0.ElementRef },] }],
         _onTab: [{ type: i0.HostListener, args: ['keydown.tab', ['$event'],] }],
         _onMouseDown: [{ type: i0.HostListener, args: ['mousedown', ['$event'],] }],
         _onFocus: [{ type: i0.HostListener, args: ['focus',] }],
-        _onBlur: [{ type: i0.HostListener, args: ['keydown.enter',] }, { type: i0.HostListener, args: ['keydown.escape',] }, { type: i0.HostListener, args: ['blur',] }],
+        _onBlur: [{ type: i0.HostListener, args: ['keydown.enter',] }, { type: i0.HostListener, args: ['keydown.escape',] }, { type: i0.HostListener, args: ['blur', ['$event'],] }],
         _onSpace: [{ type: i0.HostListener, args: ['keydown.space', ['$event'],] }],
         _onEnter: [{ type: i0.HostListener, args: ['keydown.enter', ['$event'],] }],
         _onArrowKeys: [{ type: i0.HostListener, args: ['keydown.arrowup', ['$event'],] }, { type: i0.HostListener, args: ['keydown.arrowdown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.arrowleft', ['$event'],] }, { type: i0.HostListener, args: ['keydown.arrowright', ['$event'],] }],
@@ -9999,6 +10206,7 @@
         ModalWrapperComponent,
         ModalCompactWrapperComponent,
         ProgressCircleRingComponent,
+        PopoverComponent,
     ]);
     var exportedModules = [
         AppModule,
@@ -10171,6 +10379,7 @@
     exports.PageTitleDirective = PageTitleDirective;
     exports.PageToolbarTitleDirective = PageToolbarTitleDirective;
     exports.PlatformService = PlatformService;
+    exports.PopoverComponent = PopoverComponent;
     exports.ProgressCircleComponent = ProgressCircleComponent;
     exports.RadioComponent = RadioComponent;
     exports.RadioGroupComponent = RadioGroupComponent;
@@ -10294,22 +10503,24 @@
     exports.ɵec = DividerComponent;
     exports.ɵed = ReorderListComponent;
     exports.ɵee = DropdownComponent;
-    exports.ɵef = LoadingOverlayComponent;
-    exports.ɵeg = ProgressCircleComponent;
-    exports.ɵeh = FlagComponent;
-    exports.ɵei = SlideDirective;
-    exports.ɵej = SlidesComponent;
-    exports.ɵek = AccordionDirective;
-    exports.ɵel = AccordionItemComponent;
-    exports.ɵem = RangeComponent;
-    exports.ɵen = KeyHandlerDirective;
-    exports.ɵeo = FormFieldMessageComponent;
-    exports.ɵep = AlertComponent;
-    exports.ɵeq = ModalCompactWrapperComponent;
-    exports.ɵer = ProgressCircleRingComponent;
-    exports.ɵes = ToastHelper;
-    exports.ɵet = ToastController;
-    exports.ɵeu = LoadingOverlayService;
+    exports.ɵef = PopoverComponent;
+    exports.ɵeg = KeyboardHandlerService;
+    exports.ɵeh = LoadingOverlayComponent;
+    exports.ɵei = ProgressCircleComponent;
+    exports.ɵej = FlagComponent;
+    exports.ɵek = SlideDirective;
+    exports.ɵel = SlidesComponent;
+    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.ɵf = ModalAnimationBuilderService;
     exports.ɵg = PlatformService;
     exports.ɵh = WindowRef;