@kirbydesign/designsystem 11.11.4 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-shared-floating.mjs

@@ -1,388 +1,334 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Directive } from '@angular/core';
-import { computePosition, offset, flip, shift, autoPlacement, autoUpdate } from '@floating-ui/dom';
-import { DesignTokenHelper } from '@kirbydesign/core';
-import { from } from 'rxjs';
-import * as i1 from '@kirbydesign/designsystem/shared/portal';
-import { PortalDirective } from '@kirbydesign/designsystem/shared/portal';
-
+import * as i0 from "@angular/core";
+import { Directive, EventEmitter, HostListener, Input, Output, RendererStyleFlags2 } from "@angular/core";
+import { autoPlacement, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { DesignTokenHelper } from "@kirbydesign/core";
+import { from } from "rxjs";
+import * as i1 from "@kirbydesign/designsystem/shared/portal";
+import { PortalDirective } from "@kirbydesign/designsystem/shared/portal";
 var FloatingOffset;
-(function (FloatingOffset) {
-    FloatingOffset[FloatingOffset["none"] = 0] = "none";
-    FloatingOffset[FloatingOffset["small"] = 4] = "small";
-    FloatingOffset[FloatingOffset["medium"] = 8] = "medium";
+(function(FloatingOffset) {
+	FloatingOffset[FloatingOffset["none"] = 0] = "none";
+	FloatingOffset[FloatingOffset["small"] = 4] = "small";
+	FloatingOffset[FloatingOffset["medium"] = 8] = "medium";
 })(FloatingOffset || (FloatingOffset = {}));
 var OutletSelector;
-(function (OutletSelector) {
-    OutletSelector["tag"] = "tag";
-    OutletSelector["id"] = "id";
-    OutletSelector["class"] = "class";
-    OutletSelector["name"] = "name";
+(function(OutletSelector) {
+	OutletSelector["tag"] = "tag";
+	OutletSelector["id"] = "id";
+	OutletSelector["class"] = "class";
+	OutletSelector["name"] = "name";
 })(OutletSelector || (OutletSelector = {}));
-/**
- * @summary FloatingDirective is a utility that lets you declarative anchor "popup" containers to another element.
- *
- * Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started
- *
- * Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed
- * and not as the default option.
- */
-class FloatingDirective {
-    /**
-     * Reference to the element for which the host should anchor to
-     * */
-    set reference(ref) {
-        this.tearDownReferenceElementEventHandling();
-        this._reference = ref;
-        this.setupEventHandling();
-        if (this.isShown) {
-            this.autoUpdatePosition();
-        }
-    }
-    get reference() {
-        return this._reference;
-    }
-    /**
-     * How the host should be placed relative to the reference. Can be affected by middleware
-     * */
-    set placement(placement) {
-        this._placement = placement;
-        if (this.isShown) {
-            this.updateHostElementPosition();
-        }
-    }
-    get placement() {
-        return this._placement;
-    }
-    /**
-     * The strategy for how the host should be positioned.
-     * */
-    set strategy(strategy) {
-        this._strategy = strategy;
-        if (this.isShown) {
-            this.updateHostElementPosition();
-        }
-    }
-    get strategy() {
-        return this._strategy;
-    }
-    /**
-     * Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference
-     * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations
-     * like click/focus.
-     * */
-    set triggers(eventTriggers) {
-        this._triggers = eventTriggers;
-        this.tearDownReferenceElementEventHandling();
-        this.setupEventHandling();
-    }
-    get triggers() {
-        return this._triggers;
-    }
-    /**
-     * The HTMLElement for which the content should portal into.
-     * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.
-     * This should be used when there's issues with the stacking context, and not as a default option.
-     * */
-    set DOMPortalOutlet(outlet) {
-        this._providedPortalOutlet = outlet;
-        this.portalDirective.outlet =
-            this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);
-    }
-    get DOMPortalOutlet() {
-        return this._providedPortalOutlet;
-    }
-    /**
-     * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.
-     * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used
-     * */
-    set portalOutletConfig(config) {
-        this._portalOutletConfig = config;
-        if (!this.DOMPortalOutlet) {
-            this.portalDirective.outlet = this.getOutletElement(config);
-        }
-    }
-    get portalOutletConfig() {
-        return this._portalOutletConfig;
-    }
-    onEscapeKeyPressed() {
-        if (this.closeOnEscapeKey) {
-            this.hide();
-        }
-    }
-    constructor(elementRef, renderer, portalDirective) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.portalDirective = portalDirective;
-        /**
-         * Prevent host from being toggled if set.
-         * */
-        this.isDisabled = false;
-        /**
-         * Displaces the floating element from its core placement along the specified axes.
-         * */
-        this.offset = FloatingOffset.none;
-        /**
-         * Moves the floating element along the specified axes in order to keep it in view.
-         * This does not always work as expected, so don't "just" set it.
-         * */
-        this.shift = false;
-        /**
-         * Chooses the placement that has the most space available automatically.
-         * */
-        this.autoPlacement = false;
-        /**
-         * Enables hiding the host by events. See variable names.
-         * */
-        this.closeOnSelect = true;
-        this.closeOnEscapeKey = true;
-        this.closeOnBackdrop = true;
-        /**
-         * Enables the option to be notified when the host changes display. The new display value is provided.
-         * */
-        this.displayChanged = new EventEmitter();
-        this._placement = 'bottom-start';
-        this._strategy = 'absolute';
-        this._triggers = ['click'];
-        this.isShown = false;
-        this.disposeTriggerEventListeners = [];
-        this.triggerEventMap = new Map([
-            ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],
-            [
-                'hover',
-                [
-                    { event: 'mouseenter', method: this.show.bind(this) },
-                    { event: 'mouseleave', method: this.hide.bind(this) },
-                ],
-            ],
-            [
-                'focus',
-                [
-                    { event: 'focus', method: this.show.bind(this) },
-                    { event: 'blur', method: this.hide.bind(this) },
-                ],
-            ],
-        ]);
-        this.HTMLElements = {
-            id: (value) => Array.of(document.getElementById(value)),
-            class: (value) => Array.from(document.getElementsByClassName(value)),
-            name: (value) => Array.from(document.getElementsByName(value)),
-            tag: (value) => Array.from(document.getElementsByTagName(value)),
-            default: () => null,
-        };
-    }
-    ngOnInit() {
-        this.addFloatStylingToHostElement();
-    }
-    /* Should be accessible for programmatically setting display */
-    show() {
-        if (this.isDisabled) {
-            return;
-        }
-        this.attachDocumentClickEventHandler();
-        this.attachHostClickEventHandler();
-        this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');
-        this.isShown = true;
-        this.autoUpdatePosition();
-        this.displayChanged.emit(this.isShown);
-    }
-    /* Should be accessible for programmatically setting display */
-    hide() {
-        if (this.isDisabled || !this.isShown) {
-            return;
-        }
-        this.removeAutoUpdaterRef();
-        this.tearDownDocumentClickEventHandling();
-        this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
-        this.isShown = false;
-        this.displayChanged.emit(this.isShown);
-    }
-    /* Should be accessible for programmatically setting display */
-    toggleShow() {
-        if (this.isShown) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    }
-    addFloatStylingToHostElement() {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'z-index', DesignTokenHelper.zLayer('popover'));
-        this.setDisplayStyling();
-    }
-    setDisplayStyling() {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'display', this.isShown ? `block` : `none`);
-    }
-    updateHostElementPosition() {
-        if (!this.reference) {
-            return;
-        }
-        const config = {
-            placement: this.placement,
-            middleware: this.getMiddlewareConfig(),
-            strategy: this.strategy,
-        };
-        from(computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));
-    }
-    getMiddlewareConfig() {
-        const middleware = [];
-        middleware.push(offset(this.offset));
-        middleware.push(flip());
-        if (this.shift) {
-            middleware.push(shift({ padding: parseInt(DesignTokenHelper.size('s')) }));
-        }
-        if (this.autoPlacement) {
-            middleware.push(autoPlacement());
-        }
-        return middleware;
-    }
-    autoUpdatePosition() {
-        this.removeAutoUpdaterRef();
-        if (!this.reference) {
-            return;
-        }
-        this.autoUpdaterRef = autoUpdate(this.reference?.nativeElement, this.elementRef.nativeElement, this.updateHostElementPosition.bind(this));
-    }
-    setPositionStylingOnHostElement(xPosition, yPosition) {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);
-        this.setDisplayStyling();
-    }
-    setupEventHandling() {
-        if (!this.reference || !this.triggers) {
-            return;
-        }
-        this.triggers.forEach((trigger) => this.attachTriggerEventToReferenceElement(trigger));
-    }
-    attachDocumentClickEventHandler() {
-        if (this.disposeDocumentClickListener) {
-            return;
-        }
-        this.disposeDocumentClickListener = this.renderer.listen('document', 'mousedown', (event) => this.handleClickOutsideHostElement(event));
-    }
-    attachHostClickEventHandler() {
-        if (this.disposeHostClickListener || !this.closeOnSelect) {
-            return;
-        }
-        this.disposeHostClickListener = this.renderer.listen(this.elementRef.nativeElement, 'click', () => this.handleClickInsideHostElement());
-    }
-    attachTriggerEventToReferenceElement(trigger) {
-        const events = this.triggerEventMap.get(trigger);
-        if (!events) {
-            throw new Error(`${trigger} is missing event definition(s)`);
-        }
-        events.forEach((event) => {
-            const disposeTriggerEventListener = this.renderer.listen(this.reference?.nativeElement, event.event, event.method);
-            this.disposeTriggerEventListeners.push(disposeTriggerEventListener);
-        });
-    }
-    handleClickInsideHostElement() {
-        if (this.closeOnSelect) {
-            this.hide();
-        }
-    }
-    handleClickOutsideHostElement(event) {
-        if (event.target instanceof Node) {
-            const clickedOnHost = this.elementRef.nativeElement.contains(event.target);
-            if (clickedOnHost)
-                return;
-            const clickedOnReferenceWithClickTriggerEnabled = this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');
-            if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {
-                this.hide();
-            }
-        }
-    }
-    getOutletElement(config) {
-        if (!config || !config.selector || !config.value) {
-            return null;
-        }
-        const elements = this.getHTMLElements(config);
-        if (!elements || elements.length === 0) {
-            throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);
-        }
-        if (elements.length > 1) {
-            throw Error(`Multiple HTMLElements found for ${config.selector}.
+var FloatingDirective = class FloatingDirective {
+	set reference(ref) {
+		this.tearDownReferenceElementEventHandling();
+		this._reference = ref;
+		this.setupEventHandling();
+		if (this.isShown) this.autoUpdatePosition();
+	}
+	get reference() {
+		return this._reference;
+	}
+	set placement(placement) {
+		this._placement = placement;
+		if (this.isShown) this.updateHostElementPosition();
+	}
+	get placement() {
+		return this._placement;
+	}
+	set strategy(strategy) {
+		this._strategy = strategy;
+		if (this.isShown) this.updateHostElementPosition();
+	}
+	get strategy() {
+		return this._strategy;
+	}
+	set triggers(eventTriggers) {
+		this._triggers = eventTriggers;
+		this.tearDownReferenceElementEventHandling();
+		this.setupEventHandling();
+	}
+	get triggers() {
+		return this._triggers;
+	}
+	set DOMPortalOutlet(outlet) {
+		this._providedPortalOutlet = outlet;
+		this.portalDirective.outlet = this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);
+	}
+	get DOMPortalOutlet() {
+		return this._providedPortalOutlet;
+	}
+	set portalOutletConfig(config) {
+		this._portalOutletConfig = config;
+		if (!this.DOMPortalOutlet) this.portalDirective.outlet = this.getOutletElement(config);
+	}
+	get portalOutletConfig() {
+		return this._portalOutletConfig;
+	}
+	onEscapeKeyPressed() {
+		if (this.closeOnEscapeKey) this.hide();
+	}
+	constructor(elementRef, renderer, portalDirective) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.portalDirective = portalDirective;
+		this.isDisabled = false;
+		this.offset = FloatingOffset.none;
+		this.shift = false;
+		this.autoPlacement = false;
+		this.closeOnSelect = true;
+		this.closeOnEscapeKey = true;
+		this.closeOnBackdrop = true;
+		this.displayChanged = new EventEmitter();
+		this._placement = "bottom-start";
+		this._strategy = "absolute";
+		this._triggers = ["click"];
+		this.isShown = false;
+		this.disposeTriggerEventListeners = [];
+		this.triggerEventMap = /* @__PURE__ */ new Map([
+			["click", [{
+				event: "click",
+				method: this.toggleShow.bind(this)
+			}]],
+			["hover", [{
+				event: "mouseenter",
+				method: this.show.bind(this)
+			}, {
+				event: "mouseleave",
+				method: this.hide.bind(this)
+			}]],
+			["focus", [{
+				event: "focus",
+				method: this.show.bind(this)
+			}, {
+				event: "blur",
+				method: this.hide.bind(this)
+			}]]
+		]);
+		this.HTMLElements = {
+			id: (value) => Array.of(document.getElementById(value)),
+			class: (value) => Array.from(document.getElementsByClassName(value)),
+			name: (value) => Array.from(document.getElementsByName(value)),
+			tag: (value) => Array.from(document.getElementsByTagName(value)),
+			default: () => null
+		};
+	}
+	ngOnInit() {
+		this.addFloatStylingToHostElement();
+	}
+	show() {
+		if (this.isDisabled) return;
+		this.attachDocumentClickEventHandler();
+		this.attachHostClickEventHandler();
+		this.renderer.setStyle(this.elementRef.nativeElement, "display", "block");
+		this.isShown = true;
+		this.autoUpdatePosition();
+		this.displayChanged.emit(this.isShown);
+	}
+	hide() {
+		if (this.isDisabled || !this.isShown) return;
+		this.removeAutoUpdaterRef();
+		this.tearDownDocumentClickEventHandling();
+		this.renderer.setStyle(this.elementRef.nativeElement, "display", "none");
+		this.isShown = false;
+		this.renderer.removeStyle(this.elementRef.nativeElement, "--kirby-floating-available-height", RendererStyleFlags2.DashCase);
+		this.displayChanged.emit(this.isShown);
+	}
+	toggleShow() {
+		if (this.isShown) this.hide();
+		else this.show();
+	}
+	addFloatStylingToHostElement() {
+		this.renderer.setStyle(this.elementRef.nativeElement, "left", `0px`);
+		this.renderer.setStyle(this.elementRef.nativeElement, "top", `0px`);
+		this.renderer.setStyle(this.elementRef.nativeElement, "position", this.strategy);
+		this.renderer.setStyle(this.elementRef.nativeElement, "z-index", DesignTokenHelper.zLayer("popover"));
+		this.setDisplayStyling();
+	}
+	setDisplayStyling() {
+		this.renderer.setStyle(this.elementRef.nativeElement, "display", this.isShown ? `block` : `none`);
+	}
+	updateHostElementPosition() {
+		if (!this.reference) return;
+		const config = {
+			placement: this.placement,
+			middleware: this.getMiddlewareConfig(),
+			strategy: this.strategy
+		};
+		from(computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));
+	}
+	getMiddlewareConfig() {
+		const middleware = [];
+		const padding = parseInt(DesignTokenHelper.size("s"));
+		middleware.push(offset(this.offset));
+		middleware.push(flip({ padding }));
+		if (this.shift) middleware.push(shift({ padding }));
+		middleware.push(size({
+			padding,
+			apply: ({ availableHeight, elements }) => {
+				if (!this.isShown) return;
+				this.renderer.setStyle(elements.floating, "--kirby-floating-available-height", `${Math.max(0, availableHeight)}px`, RendererStyleFlags2.DashCase);
+			}
+		}));
+		if (this.autoPlacement) middleware.push(autoPlacement());
+		return middleware;
+	}
+	autoUpdatePosition() {
+		this.removeAutoUpdaterRef();
+		if (!this.reference) return;
+		this.autoUpdaterRef = autoUpdate(this.reference?.nativeElement, this.elementRef.nativeElement, this.updateHostElementPosition.bind(this));
+	}
+	setPositionStylingOnHostElement(xPosition, yPosition) {
+		this.renderer.setStyle(this.elementRef.nativeElement, "left", `${xPosition}px`);
+		this.renderer.setStyle(this.elementRef.nativeElement, "top", `${yPosition}px`);
+		this.setDisplayStyling();
+	}
+	setupEventHandling() {
+		if (!this.reference || !this.triggers) return;
+		this.triggers.forEach((trigger) => this.attachTriggerEventToReferenceElement(trigger));
+	}
+	attachDocumentClickEventHandler() {
+		if (this.disposeDocumentClickListener) return;
+		this.disposeDocumentClickListener = this.renderer.listen("document", "mousedown", (event) => this.handleClickOutsideHostElement(event));
+	}
+	attachHostClickEventHandler() {
+		if (this.disposeHostClickListener || !this.closeOnSelect) return;
+		this.disposeHostClickListener = this.renderer.listen(this.elementRef.nativeElement, "click", () => this.handleClickInsideHostElement());
+	}
+	attachTriggerEventToReferenceElement(trigger) {
+		const events = this.triggerEventMap.get(trigger);
+		if (!events) throw new Error(`${trigger} is missing event definition(s)`);
+		events.forEach((event) => {
+			const disposeTriggerEventListener = this.renderer.listen(this.reference?.nativeElement, event.event, event.method);
+			this.disposeTriggerEventListeners.push(disposeTriggerEventListener);
+		});
+	}
+	handleClickInsideHostElement() {
+		if (this.closeOnSelect) this.hide();
+	}
+	handleClickOutsideHostElement(event) {
+		if (event.target instanceof Node) {
+			if (this.elementRef.nativeElement.contains(event.target)) return;
+			const clickedOnReferenceWithClickTriggerEnabled = this.reference?.nativeElement.contains(event.target) && this.triggers.includes("click");
+			if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) this.hide();
+		}
+	}
+	getOutletElement(config) {
+		if (!config || !config.selector || !config.value) return null;
+		const elements = this.getHTMLElements(config);
+		if (!elements || elements.length === 0) throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);
+		if (elements.length > 1) throw Error(`Multiple HTMLElements found for ${config.selector}.
          This can lead to unintended behaviours. Provide an unique outlet`);
-        }
-        return elements[0];
-    }
-    getHTMLElements(config) {
-        return (this.HTMLElements[config.selector](config.value) || this.HTMLElements['default'](config.value));
-    }
-    tearDownReferenceElementEventHandling() {
-        this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) => disposeTriggerEventListener?.());
-        this.disposeTriggerEventListeners = [];
-    }
-    tearDownDocumentClickEventHandling() {
-        if (this.disposeDocumentClickListener) {
-            this.disposeDocumentClickListener();
-            this.disposeDocumentClickListener = null;
-        }
-        if (this.disposeHostClickListener) {
-            this.disposeHostClickListener();
-            this.disposeHostClickListener = null;
-        }
-    }
-    removeAutoUpdaterRef() {
-        if (this.autoUpdaterRef) {
-            this.autoUpdaterRef();
-        }
-    }
-    ngOnDestroy() {
-        this.tearDownDocumentClickEventHandling();
-        this.tearDownReferenceElementEventHandling();
-        this.removeAutoUpdaterRef();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FloatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PortalDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed()" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FloatingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kirbyFloating]',
-                    providers: [PortalDirective],
-                    hostDirectives: [PortalDirective],
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PortalDirective }], propDecorators: { reference: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], strategy: [{
-                type: Input
-            }], triggers: [{
-                type: Input
-            }], DOMPortalOutlet: [{
-                type: Input
-            }], portalOutletConfig: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], shift: [{
-                type: Input
-            }], autoPlacement: [{
-                type: Input
-            }], closeOnSelect: [{
-                type: Input
-            }], closeOnEscapeKey: [{
-                type: Input
-            }], closeOnBackdrop: [{
-                type: Input
-            }], displayChanged: [{
-                type: Output
-            }], onEscapeKeyPressed: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+		return elements[0];
+	}
+	getHTMLElements(config) {
+		return this.HTMLElements[config.selector](config.value) || this.HTMLElements["default"](config.value);
+	}
+	tearDownReferenceElementEventHandling() {
+		this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) => disposeTriggerEventListener?.());
+		this.disposeTriggerEventListeners = [];
+	}
+	tearDownDocumentClickEventHandling() {
+		if (this.disposeDocumentClickListener) {
+			this.disposeDocumentClickListener();
+			this.disposeDocumentClickListener = null;
+		}
+		if (this.disposeHostClickListener) {
+			this.disposeHostClickListener();
+			this.disposeHostClickListener = null;
+		}
+	}
+	removeAutoUpdaterRef() {
+		if (this.autoUpdaterRef) this.autoUpdaterRef();
+	}
+	ngOnDestroy() {
+		this.tearDownDocumentClickEventHandling();
+		this.tearDownReferenceElementEventHandling();
+		this.removeAutoUpdaterRef();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: FloatingDirective,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 },
+				{ token: i1.PortalDirective }
+			],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: FloatingDirective,
+			isStandalone: true,
+			selector: "[kirbyFloating]",
+			inputs: {
+				reference: "reference",
+				placement: "placement",
+				strategy: "strategy",
+				triggers: "triggers",
+				DOMPortalOutlet: "DOMPortalOutlet",
+				portalOutletConfig: "portalOutletConfig",
+				isDisabled: "isDisabled",
+				offset: "offset",
+				shift: "shift",
+				autoPlacement: "autoPlacement",
+				closeOnSelect: "closeOnSelect",
+				closeOnEscapeKey: "closeOnEscapeKey",
+				closeOnBackdrop: "closeOnBackdrop"
+			},
+			outputs: { displayChanged: "displayChanged" },
+			host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed()" } },
+			providers: [PortalDirective],
+			hostDirectives: [{ directive: i1.PortalDirective }],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FloatingDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyFloating]",
+			providers: [PortalDirective],
+			hostDirectives: [PortalDirective],
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{ type: i1.PortalDirective }
+	],
+	propDecorators: {
+		reference: [{ type: Input }],
+		placement: [{ type: Input }],
+		strategy: [{ type: Input }],
+		triggers: [{ type: Input }],
+		DOMPortalOutlet: [{ type: Input }],
+		portalOutletConfig: [{ type: Input }],
+		isDisabled: [{ type: Input }],
+		offset: [{ type: Input }],
+		shift: [{ type: Input }],
+		autoPlacement: [{ type: Input }],
+		closeOnSelect: [{ type: Input }],
+		closeOnEscapeKey: [{ type: Input }],
+		closeOnBackdrop: [{ type: Input }],
+		displayChanged: [{ type: Output }],
+		onEscapeKeyPressed: [{
+			type: HostListener,
+			args: ["document:keydown.escape"]
+		}]
+	}
+});
 export { FloatingDirective, FloatingOffset, OutletSelector };
-//# sourceMappingURL=kirbydesign-designsystem-shared-floating.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-shared-floating.mjs.map