@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-popover.mjs

@@ -1,189 +1,209 @@
-import * as i0 from '@angular/core';
-import { ElementRef, EventEmitter, RendererStyleFlags2, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
-import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
-
-function calculateVerticalPopoverPosition({ viewportHeight, targetTop, targetBottom, contentHeight, bodyPadding, }) {
-    const availableSpaceBelow = viewportHeight - targetBottom;
-    const availableSpaceAbove = targetTop;
-    const contentFitsBelow = availableSpaceBelow >= contentHeight + bodyPadding;
-    const opensUpwards = !contentFitsBelow && availableSpaceBelow < availableSpaceAbove;
-    const availableSpace = opensUpwards ? availableSpaceAbove : availableSpaceBelow;
-    const offset = opensUpwards ? viewportHeight - targetTop : targetBottom;
-    return {
-        opensUpwards,
-        offsetFromEdge: offset,
-        availableMaxHeightInDirection: availableSpace - bodyPadding,
-    };
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output, RendererStyleFlags2, ViewChild } from "@angular/core";
+import { DesignTokenHelper } from "@kirbydesign/designsystem/helpers";
+function calculateVerticalPopoverPosition({ viewportHeight, targetTop, targetBottom, contentHeight, bodyPadding }) {
+	const availableSpaceBelow = viewportHeight - targetBottom;
+	const availableSpaceAbove = targetTop;
+	const opensUpwards = !(availableSpaceBelow >= contentHeight + bodyPadding) && availableSpaceBelow < availableSpaceAbove;
+	const availableSpace = opensUpwards ? availableSpaceAbove : availableSpaceBelow;
+	return {
+		opensUpwards,
+		offsetFromEdge: opensUpwards ? viewportHeight - targetTop : targetBottom,
+		availableMaxHeightInDirection: availableSpace - bodyPadding
+	};
 }
-
 var HorizontalDirection;
-(function (HorizontalDirection) {
-    HorizontalDirection["right"] = "right";
-    HorizontalDirection["left"] = "left";
+(function(HorizontalDirection) {
+	HorizontalDirection["right"] = "right";
+	HorizontalDirection["left"] = "left";
 })(HorizontalDirection || (HorizontalDirection = {}));
-class PopoverComponent {
-    get targetElement() {
-        if (this.target instanceof ElementRef) {
-            return this.target.nativeElement;
-        }
-        else {
-            return this.target;
-        }
-    }
-    _onWindowResize() {
-        this.hide();
-    }
-    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.openingFrameId = null;
-        this.popout = HorizontalDirection.right;
-        this.willHide = new EventEmitter();
-        this.document = elementRef.nativeElement.ownerDocument;
-    }
-    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'));
-        }
-    }
-    static preventEventOutsidePopover(event) {
-        if (event.target instanceof HTMLElement) {
-            const targetIsInPopover = !!event.target.closest('kirby-popover');
-            if (!targetIsInPopover) {
-                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');
-        }
-        this.disposeTouchMoveListener = this.renderer.listen(this.document, 'touchmove', PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
-    }
-    releaseScroll() {
-        if (this.isFirstToLockScroll) {
-            this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
-        }
-        this.disposeTouchMoveListener?.();
-    }
-    show() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');
-        this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
-        this.preventScroll();
-        this.isShowing = true;
-        this.openingFrameId = requestAnimationFrame(() => {
-            this.openingFrameId = null;
-            if (!this.isShowing)
-                return;
-            this.positionWrapper();
-            this.renderer.addClass(this.elementRef.nativeElement, 'is-open');
-            this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');
-        });
-    }
-    hide() {
-        if (!this.isShowing)
-            return;
-        if (this.openingFrameId !== null) {
-            cancelAnimationFrame(this.openingFrameId);
-            this.openingFrameId = null;
-            this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');
-        }
-        this.willHide.emit();
-        this.renderer.removeChild(this.elementRef.nativeElement.parentElement, 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 { opensUpwards, offsetFromEdge, availableMaxHeightInDirection } = calculateVerticalPopoverPosition({
-            viewportHeight: viewPort.innerHeight,
-            targetTop: targetDimensions.top,
-            targetBottom: targetDimensions.bottom,
-            contentHeight: wrapperDimensions.height,
-            bodyPadding: this.POPOVER_BODY_PADDING,
-        });
-        const anchoredEdge = opensUpwards ? 'bottom' : 'top';
-        const oppositeEdge = opensUpwards ? 'top' : 'bottom';
-        this.renderer.removeStyle(wrapperElement, oppositeEdge);
-        this.renderer.setStyle(wrapperElement, anchoredEdge, `${offsetFromEdge}px`);
-        // Constrain content to the space available in the chosen direction so it can't grow outside the viewport.
-        this.renderer.setStyle(wrapperElement, '--kirby-popover-available-max-height', `${availableMaxHeightInDirection}px`, RendererStyleFlags2.DashCase);
-        if (opensUpwards) {
-            // 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');
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: PopoverComponent, isStandalone: true, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, host: { listeners: { "window:resize": "_onWindowResize()" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
+var PopoverComponent = class PopoverComponent {
+	get targetElement() {
+		if (this.target instanceof ElementRef) return this.target.nativeElement;
+		else return this.target;
+	}
+	_onWindowResize() {
+		this.hide();
+	}
+	constructor(elementRef, renderer) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.preventScrollEventListenerOptions = { passive: false };
+		this.POPOVER_BODY_PADDING = 12;
+		this.isShowing = false;
+		this.openingFrameId = null;
+		this.popout = HorizontalDirection.right;
+		this.willHide = new EventEmitter();
+		this.document = elementRef.nativeElement.ownerDocument;
+	}
+	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"));
+	}
+	static preventEventOutsidePopover(event) {
+		if (event.target instanceof HTMLElement) {
+			if (!!!event.target.closest("kirby-popover")) 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");
+		this.disposeTouchMoveListener = this.renderer.listen(this.document, "touchmove", PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
+	}
+	releaseScroll() {
+		if (this.isFirstToLockScroll) this.renderer.removeClass(this.document.body, "backdrop-no-scroll");
+		this.disposeTouchMoveListener?.();
+	}
+	show() {
+		this.renderer.addClass(this.elementRef.nativeElement, "is-opening");
+		this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+		this.preventScroll();
+		this.isShowing = true;
+		this.openingFrameId = requestAnimationFrame(() => {
+			this.openingFrameId = null;
+			if (!this.isShowing) return;
+			this.positionWrapper();
+			this.renderer.addClass(this.elementRef.nativeElement, "is-open");
+			this.renderer.removeClass(this.elementRef.nativeElement, "is-opening");
+		});
+	}
+	hide() {
+		if (!this.isShowing) return;
+		if (this.openingFrameId !== null) {
+			cancelAnimationFrame(this.openingFrameId);
+			this.openingFrameId = null;
+			this.renderer.removeClass(this.elementRef.nativeElement, "is-opening");
+		}
+		this.willHide.emit();
+		this.renderer.removeChild(this.elementRef.nativeElement.parentElement, 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 openRight = availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING || 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 { opensUpwards, offsetFromEdge, availableMaxHeightInDirection } = calculateVerticalPopoverPosition({
+			viewportHeight: viewPort.innerHeight,
+			targetTop: targetDimensions.top,
+			targetBottom: targetDimensions.bottom,
+			contentHeight: wrapperDimensions.height,
+			bodyPadding: this.POPOVER_BODY_PADDING
+		});
+		const anchoredEdge = opensUpwards ? "bottom" : "top";
+		const oppositeEdge = opensUpwards ? "top" : "bottom";
+		this.renderer.removeStyle(wrapperElement, oppositeEdge);
+		this.renderer.setStyle(wrapperElement, anchoredEdge, `${offsetFromEdge}px`);
+		this.renderer.setStyle(wrapperElement, "--kirby-popover-available-max-height", `${availableMaxHeightInDirection}px`, RendererStyleFlags2.DashCase);
+		if (opensUpwards) {
+			this.renderer.setStyle(this.targetElement, "z-index", `${this.zIndex + 1}`);
+			this.renderer.setStyle(this.targetElement, "pointer-events", "none");
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PopoverComponent,
+			deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: PopoverComponent,
+			isStandalone: true,
+			selector: "kirby-popover",
+			inputs: {
+				popout: "popout",
+				target: "target"
+			},
+			outputs: { willHide: "willHide" },
+			host: { listeners: { "window:resize": "_onWindowResize()" } },
+			viewQueries: [{
+				propertyName: "wrapperElement",
+				first: true,
+				predicate: ["wrapper"],
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>
-  `, isInline: true, styles: [":host{display:none;position:fixed;inset:0;z-index:var(--kirby-z-index-popover)}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:var(--kirby-spacing-xxxs);margin-bottom:var(--kirby-spacing-xxxs)}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-popover', template: `
+  `,
+			isInline: true,
+			styles: [":host{display:none;position:fixed;inset:0;z-index:var(--kirby-z-index-popover)}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:var(--kirby-spacing-xxxs);margin-bottom:var(--kirby-spacing-xxxs)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PopoverComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-popover",
+			template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>
-  `, styles: [":host{display:none;position:fixed;inset:0;z-index:var(--kirby-z-index-popover)}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:var(--kirby-spacing-xxxs);margin-bottom:var(--kirby-spacing-xxxs)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { wrapperElement: [{
-                type: ViewChild,
-                args: ['wrapper', { static: true, read: ElementRef }]
-            }], popout: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], willHide: [{
-                type: Output
-            }], _onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `,
+			changeDetection: ChangeDetectionStrategy.Eager,
+			styles: [":host{display:none;position:fixed;inset:0;z-index:var(--kirby-z-index-popover)}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:var(--kirby-spacing-xxxs);margin-bottom:var(--kirby-spacing-xxxs)}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
+	propDecorators: {
+		wrapperElement: [{
+			type: ViewChild,
+			args: ["wrapper", {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		popout: [{ type: Input }],
+		target: [{ type: Input }],
+		willHide: [{ type: Output }],
+		_onWindowResize: [{
+			type: HostListener,
+			args: ["window:resize"]
+		}]
+	}
+});
 export { HorizontalDirection, PopoverComponent };
-//# sourceMappingURL=kirbydesign-designsystem-popover.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-popover.mjs.map

package/fesm2022/kirbydesign-designsystem-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-popover.mjs","sources":["../../popover/src/popover.helper.ts","../../popover/src/popover.component.ts","../../popover/src/kirbydesign-designsystem-popover.ts"],"sourcesContent":["export interface VerticalPositionInput {\n  viewportHeight: number;\n  targetTop: number;\n  targetBottom: number;\n  contentHeight: number;\n  bodyPadding: number;\n}\n\nexport interface VerticalPosition {\n  opensUpwards: boolean;\n  offsetFromEdge: number;\n  availableMaxHeightInDirection: number;\n}\n\nexport function calculateVerticalPopoverPosition({\n  viewportHeight,\n  targetTop,\n  targetBottom,\n  contentHeight,\n  bodyPadding,\n}: VerticalPositionInput): VerticalPosition {\n  const availableSpaceBelow = viewportHeight - targetBottom;\n  const availableSpaceAbove = targetTop;\n  const contentFitsBelow = availableSpaceBelow >= contentHeight + bodyPadding;\n  const opensUpwards = !contentFitsBelow && availableSpaceBelow < availableSpaceAbove;\n\n  const availableSpace = opensUpwards ? availableSpaceAbove : availableSpaceBelow;\n  const offset = opensUpwards ? viewportHeight - targetTop : targetBottom;\n\n  return {\n    opensUpwards,\n    offsetFromEdge: offset,\n    availableMaxHeightInDirection: availableSpace - bodyPadding,\n  };\n}\n","import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  RendererStyleFlags2,\n  ViewChild,\n} from '@angular/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nimport { calculateVerticalPopoverPosition } from './popover.helper';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n  private openingFrameId: ReturnType<typeof requestAnimationFrame> | null = null;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  private disposeTouchMoveListener: EventListenerDisposeFn;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener = this.renderer.listen(\n      this.document,\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener?.();\n  }\n\n  show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.isShowing = true;\n\n    this.openingFrameId = requestAnimationFrame(() => {\n      this.openingFrameId = null;\n      if (!this.isShowing) return;\n      this.positionWrapper();\n      this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    });\n  }\n\n  hide() {\n    if (!this.isShowing) return;\n\n    if (this.openingFrameId !== null) {\n      cancelAnimationFrame(this.openingFrameId);\n      this.openingFrameId = null;\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    }\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const { opensUpwards, offsetFromEdge, availableMaxHeightInDirection } =\n      calculateVerticalPopoverPosition({\n        viewportHeight: viewPort.innerHeight,\n        targetTop: targetDimensions.top,\n        targetBottom: targetDimensions.bottom,\n        contentHeight: wrapperDimensions.height,\n        bodyPadding: this.POPOVER_BODY_PADDING,\n      });\n\n    const anchoredEdge = opensUpwards ? 'bottom' : 'top';\n    const oppositeEdge = opensUpwards ? 'top' : 'bottom';\n\n    this.renderer.removeStyle(wrapperElement, oppositeEdge);\n    this.renderer.setStyle(wrapperElement, anchoredEdge, `${offsetFromEdge}px`);\n\n    // Constrain content to the space available in the chosen direction so it can't grow outside the viewport.\n    this.renderer.setStyle(\n      wrapperElement,\n      '--kirby-popover-available-max-height',\n      `${availableMaxHeightInDirection}px`,\n      RendererStyleFlags2.DashCase\n    );\n\n    if (opensUpwards) {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-popover.mjs","names":[],"sources":["../../popover/src/popover.helper.ts","../../popover/src/popover.component.ts"],"sourcesContent":["export interface VerticalPositionInput {\n  viewportHeight: number;\n  targetTop: number;\n  targetBottom: number;\n  contentHeight: number;\n  bodyPadding: number;\n}\n\nexport interface VerticalPosition {\n  opensUpwards: boolean;\n  offsetFromEdge: number;\n  availableMaxHeightInDirection: number;\n}\n\nexport function calculateVerticalPopoverPosition({\n  viewportHeight,\n  targetTop,\n  targetBottom,\n  contentHeight,\n  bodyPadding,\n}: VerticalPositionInput): VerticalPosition {\n  const availableSpaceBelow = viewportHeight - targetBottom;\n  const availableSpaceAbove = targetTop;\n  const contentFitsBelow = availableSpaceBelow >= contentHeight + bodyPadding;\n  const opensUpwards = !contentFitsBelow && availableSpaceBelow < availableSpaceAbove;\n\n  const availableSpace = opensUpwards ? availableSpaceAbove : availableSpaceBelow;\n  const offset = opensUpwards ? viewportHeight - targetTop : targetBottom;\n\n  return {\n    opensUpwards,\n    offsetFromEdge: offset,\n    availableMaxHeightInDirection: availableSpace - bodyPadding,\n  };\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  RendererStyleFlags2,\n  ViewChild,\n} from '@angular/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nimport { calculateVerticalPopoverPosition } from './popover.helper';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n  private openingFrameId: ReturnType<typeof requestAnimationFrame> | null = null;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  private disposeTouchMoveListener: EventListenerDisposeFn;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener = this.renderer.listen(\n      this.document,\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.disposeTouchMoveListener?.();\n  }\n\n  public show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.isShowing = true;\n\n    this.openingFrameId = requestAnimationFrame(() => {\n      this.openingFrameId = null;\n      if (!this.isShowing) return;\n      this.positionWrapper();\n      this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    });\n  }\n\n  public hide() {\n    if (!this.isShowing) return;\n\n    if (this.openingFrameId !== null) {\n      cancelAnimationFrame(this.openingFrameId);\n      this.openingFrameId = null;\n      this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n    }\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const { opensUpwards, offsetFromEdge, availableMaxHeightInDirection } =\n      calculateVerticalPopoverPosition({\n        viewportHeight: viewPort.innerHeight,\n        targetTop: targetDimensions.top,\n        targetBottom: targetDimensions.bottom,\n        contentHeight: wrapperDimensions.height,\n        bodyPadding: this.POPOVER_BODY_PADDING,\n      });\n\n    const anchoredEdge = opensUpwards ? 'bottom' : 'top';\n    const oppositeEdge = opensUpwards ? 'top' : 'bottom';\n\n    this.renderer.removeStyle(wrapperElement, oppositeEdge);\n    this.renderer.setStyle(wrapperElement, anchoredEdge, `${offsetFromEdge}px`);\n\n    // Constrain content to the space available in the chosen direction so it can't grow outside the viewport.\n    this.renderer.setStyle(\n      wrapperElement,\n      '--kirby-popover-available-max-height',\n      `${availableMaxHeightInDirection}px`,\n      RendererStyleFlags2.DashCase\n    );\n\n    if (opensUpwards) {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\n}\n"],"mappings":"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"}