@lumston/ds-angular 0.0.6 → 0.0.8

package/fesm2022/lumston-ds-angular-src-overlay.mjs

@@ -0,0 +1,1038 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, model, input, output, viewChild, signal, effect, untracked, HostListener, ChangeDetectionStrategy, Component, computed, ElementRef, Directive, Injectable, contentChild, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * Renders an anchored floating menu panel attached to a trigger element.
+ *
+ * Supports both **controlled** and **directive-driven** open modes:
+ * - **Controlled**: bind `[(open)]` and respond to `opened`/`closed` outputs.
+ * - **Directive-driven**: apply `lsMenuTriggerFor` to any host element;
+ *   the directive calls `setAnchorEl()` and `toggle()` automatically.
+ *
+ * Panel position is derived from the anchor element's bounding rect combined
+ * with `anchorOrigin` (attachment point on the trigger) and `transformOrigin`
+ * (attachment point on the panel). Position is recomputed each time the
+ * panel opens via a `setTimeout(0)` deferral to ensure the panel is measured.
+ *
+ * When `disablePortal` is `false` (default), the panel uses `position: fixed`
+ * for viewport-relative placement. When `true`, it uses `position: absolute`.
+ *
+ * Keyboard: `Escape` closes the panel; `ArrowDown`/`ArrowUp` move focus
+ * between enabled `[role="menuitem"]` elements inside the panel.
+ *
+ * @example
+ * ```html
+ * <!-- Controlled -->
+ * <ls-menu [(open)]="isOpen" [anchorEl]="triggerEl">
+ *   <ls-menu-item (itemClick)="onEdit()">Edit</ls-menu-item>
+ * </ls-menu>
+ *
+ * <!-- Directive-driven -->
+ * <button [lsMenuTriggerFor]="myMenu">Open</button>
+ * <ls-menu #myMenu>
+ *   <ls-menu-item>Delete</ls-menu-item>
+ * </ls-menu>
+ * ```
+ */
+class MenuComponent {
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._destroyRef = inject(DestroyRef);
+        /** Controls the visibility of the menu panel. Supports two-way binding. */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        /**
+         * Element used to position the menu panel.
+         *
+         * Accepts a native DOM element, an `ElementRef`, or any Angular component
+         * that exposes a `nativeElement: HTMLElement` property (e.g. `ls-button`).
+         * In templates, pass a template reference variable directly:
+         * `[anchorEl]="btn"` where `#btn` is on any element or component.
+         *
+         * When using `lsMenuTriggerFor`, this is set automatically by the directive
+         * via `setAnchorEl()`. When using controlled mode, bind directly.
+         *
+         * @default null
+         */
+        this.anchorEl = input(null, ...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+        /**
+         * Defines the attachment point on the anchor element.
+         *
+         * Combined with `transformOrigin` to compute the panel's `top`/`left`
+         * position via `getBoundingClientRect()`.
+         *
+         * @default { vertical: 'bottom', horizontal: 'left' }
+         */
+        this.anchorOrigin = input({
+            vertical: 'bottom',
+            horizontal: 'left',
+        }, ...(ngDevMode ? [{ debugName: "anchorOrigin" }] : []));
+        /**
+         * Defines the attachment point on the menu panel surface.
+         *
+         * The panel is translated so this point aligns with `anchorOrigin`.
+         *
+         * @default { vertical: 'top', horizontal: 'left' }
+         */
+        this.transformOrigin = input({
+            vertical: 'top',
+            horizontal: 'left',
+        }, ...(ngDevMode ? [{ debugName: "transformOrigin" }] : []));
+        /**
+         * When `false` (default), the panel uses `position: fixed` for
+         * viewport-relative placement. When `true`, uses `position: absolute`
+         * and renders relative to the nearest positioned ancestor.
+         *
+         * @default false
+         */
+        this.disablePortal = input(false, ...(ngDevMode ? [{ debugName: "disablePortal" }] : []));
+        /**
+         * When `true`, the panel closes automatically after the user activates
+         * a `ls-menu-item` (i.e., a `[role="menuitem"]` element) inside it.
+         *
+         * @default true
+         */
+        this.closeOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnClick" }] : []));
+        /**
+         * Emits when the panel's opening animation completes.
+         * Does NOT emit when `open` is set programmatically without animation.
+         */
+        this.opened = output();
+        /**
+         * Emits when the panel's closing animation completes and the panel
+         * is fully hidden. In controlled mode, the host can use this to update
+         * state after the transition finishes.
+         */
+        this.closed = output();
+        /**
+         * Emits when the user clicks the transparent backdrop behind the panel.
+         * The menu closes automatically after this output emits.
+         */
+        this.backdropClick = output();
+        this._panelRef = viewChild('panelRef', ...(ngDevMode ? [{ debugName: "_panelRef" }] : []));
+        this._isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isAnimating" }] : []));
+        this._wasOpen = false;
+        this._previouslyFocused = null;
+        this._savedBodyOverflow = '';
+        this._savedBodyPaddingRight = '';
+        this._resolvedAnchorEl = signal(null, ...(ngDevMode ? [{ debugName: "_resolvedAnchorEl" }] : []));
+        this._repositionHandler = () => this._computeAndApplyPosition();
+        // Manages animation state, scroll lock, focus, and repositioning listeners
+        // when the panel opens or closes.
+        effect(() => {
+            const isOpen = this.open();
+            untracked(() => {
+                if (isOpen) {
+                    this._isAnimating.set(true);
+                    this._previouslyFocused = this._document.activeElement;
+                    this._savedBodyOverflow = this._document.body.style.overflow;
+                    this._savedBodyPaddingRight = this._document.body.style.paddingRight;
+                    const scrollbarWidth = this._getScrollbarWidth();
+                    if (scrollbarWidth > 0) {
+                        this._document.body.style.paddingRight = `${scrollbarWidth}px`;
+                    }
+                    this._document.body.style.overflow = 'hidden';
+                    setTimeout(() => this._panelRef()?.nativeElement.focus(), 0);
+                    window.addEventListener('resize', this._repositionHandler);
+                    window.addEventListener('scroll', this._repositionHandler, true);
+                    this._wasOpen = true;
+                }
+                else if (this._wasOpen) {
+                    this._isAnimating.set(true);
+                    window.removeEventListener('resize', this._repositionHandler);
+                    window.removeEventListener('scroll', this._repositionHandler, true);
+                    this._wasOpen = false;
+                }
+            });
+        });
+        // Computes and applies panel position whenever the panel enters the DOM
+        // or any positioning input changes. Using a separate effect (rather than
+        // setTimeout) guarantees that Angular has already updated the viewChild
+        // signal before this runs, so _panelRef() is always non-null here.
+        effect(() => {
+            const panel = this._panelRef()?.nativeElement;
+            if (!panel)
+                return;
+            this._computeAndApplyPosition();
+        });
+        this._destroyRef.onDestroy(() => {
+            window.removeEventListener('resize', this._repositionHandler);
+            window.removeEventListener('scroll', this._repositionHandler, true);
+            if (this._wasOpen) {
+                this._document.body.style.overflow = this._savedBodyOverflow;
+                this._document.body.style.paddingRight = this._savedBodyPaddingRight;
+                this._previouslyFocused?.focus?.();
+            }
+        });
+    }
+    /** Toggles the panel between open and closed. */
+    toggle() {
+        this.open.set(!this.open());
+    }
+    /**
+     * Sets the anchor element used for panel positioning.
+     * Called automatically by `MenuTriggerDirective`.
+     */
+    setAnchorEl(el) {
+        this._resolvedAnchorEl.set(el);
+    }
+    /** Closes the panel without waiting for a user interaction. */
+    requestClose() {
+        this.open.set(false);
+    }
+    onBackdropClick(event) {
+        this.backdropClick.emit(event);
+        this.open.set(false);
+    }
+    onPanelClick(event) {
+        if (!this.closeOnClick())
+            return;
+        const target = event.target;
+        if (target.closest('[role="menuitem"]') !== null) {
+            this.open.set(false);
+        }
+    }
+    onAnimationEnd() {
+        this._isAnimating.set(false);
+        if (this.open()) {
+            this.opened.emit();
+        }
+        else {
+            this._document.body.style.overflow = this._savedBodyOverflow;
+            this._document.body.style.paddingRight = this._savedBodyPaddingRight;
+            this.closed.emit();
+            this._previouslyFocused?.focus?.();
+            this._previouslyFocused = null;
+        }
+    }
+    onEscape() {
+        if (this.open()) {
+            this.open.set(false);
+        }
+    }
+    onArrowDown(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this._moveFocus(1);
+    }
+    onArrowUp(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this._moveFocus(-1);
+    }
+    _computeAndApplyPosition() {
+        const rawAnchor = this.anchorEl() ?? this._resolvedAnchorEl();
+        const panel = this._panelRef()?.nativeElement;
+        if (!rawAnchor || !panel)
+            return;
+        const anchorEl = this._toHTMLElement(rawAnchor);
+        if (!anchorEl)
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const ao = this.anchorOrigin();
+        const to = this.transformOrigin();
+        const anchorX = anchorRect.left +
+            (ao.horizontal === 'center'
+                ? anchorRect.width / 2
+                : ao.horizontal === 'right'
+                    ? anchorRect.width
+                    : 0);
+        const anchorY = anchorRect.top +
+            (ao.vertical === 'center'
+                ? anchorRect.height / 2
+                : ao.vertical === 'bottom'
+                    ? anchorRect.height
+                    : 0);
+        const transformX = to.horizontal === 'center'
+            ? panelRect.width / 2
+            : to.horizontal === 'right'
+                ? panelRect.width
+                : 0;
+        const transformY = to.vertical === 'center'
+            ? panelRect.height / 2
+            : to.vertical === 'bottom'
+                ? panelRect.height
+                : 0;
+        panel.style.setProperty('--menu-top', `${anchorY - transformY}px`);
+        panel.style.setProperty('--menu-left', `${anchorX - transformX}px`);
+    }
+    /**
+     * Resolves any supported anchor value to a plain `HTMLElement`.
+     *
+     * Handles: `HTMLElement`, `ElementRef<HTMLElement>`, and objects that expose
+     * a `nativeElement: HTMLElement` property (e.g. `ls-button` component refs).
+     */
+    _toHTMLElement(anchor) {
+        if (!anchor)
+            return null;
+        if (anchor instanceof HTMLElement)
+            return anchor;
+        if (typeof anchor === 'object' &&
+            anchor !== null &&
+            'nativeElement' in anchor) {
+            const el = anchor.nativeElement;
+            return el instanceof HTMLElement ? el : null;
+        }
+        return null;
+    }
+    _moveFocus(direction) {
+        const panel = this._panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        const items = Array.from(panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(this._document.activeElement);
+        const nextIndex = currentIndex === -1
+            ? direction === 1
+                ? 0
+                : items.length - 1
+            : (currentIndex + direction + items.length) % items.length;
+        items[nextIndex]?.focus();
+    }
+    _getScrollbarWidth() {
+        return window.innerWidth - this._document.documentElement.clientWidth;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenuComponent, isStandalone: true, selector: "ls-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: false, transformFunction: null }, anchorOrigin: { classPropertyName: "anchorOrigin", publicName: "anchorOrigin", isSignal: true, isRequired: false, transformFunction: null }, transformOrigin: { classPropertyName: "transformOrigin", publicName: "transformOrigin", isSignal: true, isRequired: false, transformFunction: null }, disablePortal: { classPropertyName: "disablePortal", publicName: "disablePortal", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.arrowdown": "onArrowDown($event)", "document:keydown.arrowup": "onArrowUp($event)" } }, viewQueries: [{ propertyName: "_panelRef", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open() || _isAnimating()) {
+      <div class="menu-backdrop" (click)="onBackdropClick($event)"></div>
+      <div
+        #panelRef
+        class="menu-panel"
+        [class.menu-panel-inline]="disablePortal()"
+        [class.menu-enter]="open() && _isAnimating()"
+        [class.menu-leave]="!open() && _isAnimating()"
+        role="menu"
+        tabindex="-1"
+        (click)="onPanelClick($event)"
+        (animationend)="onAnimationEnd()">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-menu', standalone: true, template: `
+    @if (open() || _isAnimating()) {
+      <div class="menu-backdrop" (click)="onBackdropClick($event)"></div>
+      <div
+        #panelRef
+        class="menu-panel"
+        [class.menu-panel-inline]="disablePortal()"
+        [class.menu-enter]="open() && _isAnimating()"
+        [class.menu-leave]="!open() && _isAnimating()"
+        role="menu"
+        tabindex="-1"
+        (click)="onPanelClick($event)"
+        (animationend)="onAnimationEnd()">
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: false }] }], anchorOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorOrigin", required: false }] }], transformOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformOrigin", required: false }] }], disablePortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePortal", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], _panelRef: [{ type: i0.ViewChild, args: ['panelRef', { isSignal: true }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['document:keydown.arrowdown', ['$event']]
+            }], onArrowUp: [{
+                type: HostListener,
+                args: ['document:keydown.arrowup', ['$event']]
+            }] } });
+
+/**
+ * Interactive item rendered inside an `ls-menu` panel.
+ *
+ * Renders a `<button role="menuitem">` that projects its label via
+ * `<ng-content>`. Visual density, gutters, and a bottom divider are
+ * configurable via inputs. When `disabled` is `true`, the item is not
+ * interactive and the `itemClick` output will not emit.
+ *
+ * @example
+ * ```html
+ * <ls-menu-item [dense]="true" (itemClick)="onEdit($event)">
+ *   Edit
+ * </ls-menu-item>
+ * ```
+ */
+class MenuItemComponent {
+    constructor() {
+        /**
+         * Reduces the vertical padding of the item for compact layouts.
+         *
+         * @default false
+         */
+        this.dense = input(false, ...(ngDevMode ? [{ debugName: "dense" }] : []));
+        /**
+         * Removes left and right padding when `true`.
+         *
+         * @default false
+         */
+        this.disableGutters = input(false, ...(ngDevMode ? [{ debugName: "disableGutters" }] : []));
+        /**
+         * Adds a 1px border at the bottom of the item to act as a visual divider.
+         *
+         * @default false
+         */
+        this.divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : []));
+        /**
+         * Prevents interaction. Applies disabled styling, sets `aria-disabled="true"`,
+         * and suppresses the `itemClick` output.
+         *
+         * @default false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Emits the originating `MouseEvent` when the user activates the item.
+         * Does NOT emit when `disabled` is `true`.
+         */
+        this.itemClick = output();
+        this._itemClasses = computed(() => {
+            const classes = ['menu-item'];
+            if (this.dense())
+                classes.push('menu-item-dense');
+            if (this.disableGutters())
+                classes.push('menu-item-no-gutters');
+            if (this.divider())
+                classes.push('menu-item-divider');
+            if (this.disabled())
+                classes.push('menu-item-disabled');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_itemClasses" }] : []));
+    }
+    handleClick(event) {
+        if (this.disabled())
+            return;
+        this.itemClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: MenuItemComponent, isStandalone: true, selector: "ls-menu-item", inputs: { dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, disableGutters: { classPropertyName: "disableGutters", publicName: "disableGutters", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="_itemClasses()"
+      [disabled]="disabled()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      role="menuitem"
+      (click)="handleClick($event)">
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-menu-item', standalone: true, template: `
+    <button
+      type="button"
+      [class]="_itemClasses()"
+      [disabled]="disabled()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      role="menuitem"
+      (click)="handleClick($event)">
+      <ng-content />
+    </button>
+  `, styles: [":host{display:contents}.menu-backdrop{position:fixed;inset:0;z-index:var(--ls-menu-z-index);background-color:transparent}.menu-panel{position:fixed;top:var(--menu-top, 0px);left:var(--menu-left, 0px);z-index:calc(var(--ls-menu-z-index) + 1);min-width:10rem;padding:.25rem 0;background-color:#fff;border-radius:var(--ls-border-radius-md);box-shadow:0 4px 24px #0000001f;outline:none}.menu-panel.menu-panel-inline{position:absolute}@keyframes menu-enter-kf{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes menu-leave-kf{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-4px)}}.menu-panel.menu-enter{animation:menu-enter-kf .15s ease-out forwards}.menu-panel.menu-leave{animation:menu-leave-kf .1s ease-in forwards}.menu-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;background:none;border:none;text-align:left;font-family:var(--ls-font-family);font-size:.875rem;color:#3b3f5c;cursor:pointer;transition:background-color var(--ls-transition-duration) ease}.menu-item:hover:not(:disabled){background-color:#f1f2f3}.menu-item:focus-visible{outline:2px solid var(--ls-color-primary);outline-offset:-2px;background-color:#f1f2f3}.menu-item-dense{padding-top:.25rem;padding-bottom:.25rem}.menu-item-no-gutters{padding-inline:0}.menu-item-divider{border-bottom:1px solid #e0e6ed}.menu-item-disabled{color:#888ea8;pointer-events:none;cursor:not-allowed}body.dark .menu-panel{background-color:#1b2e4b;box-shadow:0 4px 24px #0006}body.dark .menu-item{color:#e0e6ed}body.dark .menu-item:hover:not(:disabled){background-color:#253b5e}body.dark .menu-item:focus-visible{background-color:#253b5e}body.dark .menu-item-divider{border-bottom-color:#253b5e}body.dark .menu-item-disabled{color:#506690}\n"] }]
+        }], propDecorators: { dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], disableGutters: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableGutters", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Connects any host element to a `MenuComponent` instance, enabling
+ * click-to-toggle behavior without manual open-state management.
+ *
+ * Sets `anchorEl` on the linked `MenuComponent` to the host element
+ * before toggling visibility, so the panel is correctly positioned
+ * relative to the trigger. Also applies `aria-haspopup="menu"` to the
+ * host for accessibility.
+ *
+ * @example
+ * ```html
+ * <button type="button" [lsMenuTriggerFor]="myMenu">Options</button>
+ * <ls-menu #myMenu>
+ *   <ls-menu-item>Delete</ls-menu-item>
+ * </ls-menu>
+ * ```
+ */
+class MenuTriggerDirective {
+    constructor() {
+        /**
+         * The `MenuComponent` instance this directive controls.
+         * Assign a template reference variable of `ls-menu`.
+         */
+        this.lsMenuTriggerFor = input.required(...(ngDevMode ? [{ debugName: "lsMenuTriggerFor" }] : []));
+        this._elementRef = inject((ElementRef));
+    }
+    onClick() {
+        const menu = this.lsMenuTriggerFor();
+        menu.setAnchorEl(this._resolveAnchorElement());
+        menu.toggle();
+    }
+    /**
+     * Resolves the first ancestor element that has a real layout box.
+     *
+     * Angular component hosts commonly use `:host { display: contents }`,
+     * which means the element itself has no bounding box and
+     * `getBoundingClientRect()` returns all zeros. This method walks down
+     * through `display: contents` wrappers until it reaches the first child
+     * that participates in layout, so the menu panel is positioned relative
+     * to the visible trigger element rather than a phantom box.
+     */
+    _resolveAnchorElement() {
+        let el = this._elementRef.nativeElement;
+        while (el.firstElementChild && getComputedStyle(el).display === 'contents') {
+            el = el.firstElementChild;
+        }
+        return el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: MenuTriggerDirective, isStandalone: true, selector: "[lsMenuTriggerFor]", inputs: { lsMenuTriggerFor: { classPropertyName: "lsMenuTriggerFor", publicName: "lsMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: { 'aria-haspopup': 'menu' },
+                    selector: '[lsMenuTriggerFor]',
+                    standalone: true,
+                }]
+        }], propDecorators: { lsMenuTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "lsMenuTriggerFor", required: true }] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class ModalActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalActionsComponent, isStandalone: true, selector: "ls-modal-actions", host: { classAttribute: "modal-actions" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-actions' },
+                    imports: [],
+                    selector: 'ls-modal-actions',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+let _titleIdCounter = 0;
+class ModalTitleComponent {
+    constructor() {
+        this.id = `ls-modal-title-${++_titleIdCounter}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalTitleComponent, isStandalone: true, selector: "ls-modal-title", host: { properties: { "id": "id" }, classAttribute: "modal-title" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-title', '[id]': 'id' },
+                    imports: [],
+                    selector: 'ls-modal-title',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class ModalStackService {
+    constructor() {
+        this._stack = signal([], ...(ngDevMode ? [{ debugName: "_stack" }] : []));
+    }
+    push(id) {
+        this._stack.update(stack => [...stack, id]);
+    }
+    pop(id) {
+        this._stack.update(stack => stack.filter(s => s !== id));
+    }
+    isTop(id) {
+        const stack = this._stack();
+        return stack.length > 0 && stack[stack.length - 1] === id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let _modalIdCounter = 0;
+class ModalComponent {
+    constructor() {
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        this.disableBackdropClose = input(false, ...(ngDevMode ? [{ debugName: "disableBackdropClose" }] : []));
+        this.fullScreen = input(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
+        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+        this.maxWidth = input('md', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+        this.scroll = input('dialog', ...(ngDevMode ? [{ debugName: "scroll" }] : []));
+        this.showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+        this.closed = output();
+        this._modalStackService = inject(ModalStackService);
+        this._titleComponent = contentChild(ModalTitleComponent, ...(ngDevMode ? [{ debugName: "_titleComponent" }] : []));
+        this._panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "_panel" }] : []));
+        this._id = `ls-modal-${++_modalIdCounter}`;
+        this._previouslyFocused = null;
+        this.labelledById = computed(() => {
+            const title = this._titleComponent();
+            return title ? title.id : null;
+        }, ...(ngDevMode ? [{ debugName: "labelledById" }] : []));
+        this.overlayClasses = computed(() => {
+            const classes = ['modal-overlay'];
+            if (this.scroll() === 'body')
+                classes.push('modal-overlay-body');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "overlayClasses" }] : []));
+        this.panelClasses = computed(() => {
+            const classes = [
+                'modal-panel',
+                `modal-max-${this.maxWidth()}`,
+                `modal-scroll-${this.scroll()}`,
+            ];
+            if (this.fullScreen())
+                classes.push('modal-full-screen');
+            if (this.fullWidth())
+                classes.push('modal-full-width');
+            if (this.showCloseButton())
+                classes.push('modal-has-close-btn');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+        effect(() => {
+            if (this.open()) {
+                this._previouslyFocused = document.activeElement;
+                this._modalStackService.push(this._id);
+                setTimeout(() => {
+                    untracked(() => this._panel()?.nativeElement.focus());
+                }, 0);
+            }
+            else {
+                this._modalStackService.pop(this._id);
+                this._previouslyFocused?.focus?.();
+                this._previouslyFocused = null;
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.open()) {
+            this._modalStackService.pop(this._id);
+        }
+    }
+    onEscape() {
+        if (this.open() && this._modalStackService.isTop(this._id)) {
+            this.closed.emit();
+        }
+    }
+    onBackdropClick() {
+        if (!this.disableBackdropClose()) {
+            this.closed.emit();
+        }
+    }
+    onCloseButtonClick() {
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ModalComponent, isStandalone: true, selector: "ls-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "_titleComponent", first: true, predicate: ModalTitleComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <div [class]="overlayClasses()" (click)="onBackdropClick()">
+        <div
+          #panel
+          [attr.aria-labelledby]="labelledById()"
+          [attr.aria-modal]="true"
+          [class]="panelClasses()"
+          role="dialog"
+          tabindex="-1"
+          (click)="$event.stopPropagation()">
+          @if (showCloseButton()) {
+            <button
+              aria-label="Close"
+              class="modal-close-btn"
+              type="button"
+              (click)="onCloseButtonClick()">
+              <i class="ls-icon ls-x ls-icon-sm"></i>
+            </button>
+          }
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.modal-overlay{align-items:center;background-color:var(--ls-modal-backdrop-bg);display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:var(--ls-modal-z-index)}.modal-overlay-body{align-items:flex-start;overflow-y:auto}.modal-panel{background-color:var(--ls-color-white);border-radius:var(--ls-border-radius-lg);box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:calc(100vh - 2rem);outline:none;position:relative;width:100%}.modal-max-sm{max-width:24rem}.modal-max-md{max-width:32rem}.modal-max-lg{max-width:48rem}.modal-max-xl{max-width:64rem}.modal-max-full{max-width:100%}.modal-full-screen{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.modal-full-width{max-width:100%}.modal-scroll-dialog{max-height:calc(100vh - 2rem);overflow:hidden}.modal-scroll-body{max-height:none}.modal-close-btn{align-items:center;background:transparent;border:none;border-radius:.25rem;color:inherit;cursor:pointer;display:flex;justify-content:center;padding:.25rem;position:absolute;right:.75rem;top:.75rem;transition:background-color .15s}.modal-close-btn:hover{background-color:var(--ls-color-dark-light)}.modal-has-close-btn .modal-title{padding-right:3rem}.modal-title{border-bottom:1px solid var(--ls-color-dark-light);font-family:var(--ls-font-family);font-size:1.125rem;font-weight:700;padding:1.25rem 1.5rem}.modal-content{flex:1;overflow-y:auto;padding:1.5rem}.modal-actions{border-top:1px solid var(--ls-color-dark-light);display:flex;gap:.75rem;justify-content:flex-end;padding:1rem 1.5rem}body.dark .modal-panel{background-color:#1b2e4b;box-shadow:0 20px 60px #0009}body.dark .modal-title{border-bottom-color:#253958}body.dark .modal-actions{border-top-color:#253958}body.dark .modal-close-btn:hover{background-color:#253958}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-modal', standalone: true, template: `
+    @if (open()) {
+      <div [class]="overlayClasses()" (click)="onBackdropClick()">
+        <div
+          #panel
+          [attr.aria-labelledby]="labelledById()"
+          [attr.aria-modal]="true"
+          [class]="panelClasses()"
+          role="dialog"
+          tabindex="-1"
+          (click)="$event.stopPropagation()">
+          @if (showCloseButton()) {
+            <button
+              aria-label="Close"
+              class="modal-close-btn"
+              type="button"
+              (click)="onCloseButtonClick()">
+              <i class="ls-icon ls-x ls-icon-sm"></i>
+            </button>
+          }
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, styles: [":host{display:contents}.modal-overlay{align-items:center;background-color:var(--ls-modal-backdrop-bg);display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:var(--ls-modal-z-index)}.modal-overlay-body{align-items:flex-start;overflow-y:auto}.modal-panel{background-color:var(--ls-color-white);border-radius:var(--ls-border-radius-lg);box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:calc(100vh - 2rem);outline:none;position:relative;width:100%}.modal-max-sm{max-width:24rem}.modal-max-md{max-width:32rem}.modal-max-lg{max-width:48rem}.modal-max-xl{max-width:64rem}.modal-max-full{max-width:100%}.modal-full-screen{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.modal-full-width{max-width:100%}.modal-scroll-dialog{max-height:calc(100vh - 2rem);overflow:hidden}.modal-scroll-body{max-height:none}.modal-close-btn{align-items:center;background:transparent;border:none;border-radius:.25rem;color:inherit;cursor:pointer;display:flex;justify-content:center;padding:.25rem;position:absolute;right:.75rem;top:.75rem;transition:background-color .15s}.modal-close-btn:hover{background-color:var(--ls-color-dark-light)}.modal-has-close-btn .modal-title{padding-right:3rem}.modal-title{border-bottom:1px solid var(--ls-color-dark-light);font-family:var(--ls-font-family);font-size:1.125rem;font-weight:700;padding:1.25rem 1.5rem}.modal-content{flex:1;overflow-y:auto;padding:1.5rem}.modal-actions{border-top:1px solid var(--ls-color-dark-light);display:flex;gap:.75rem;justify-content:flex-end;padding:1rem 1.5rem}body.dark .modal-panel{background-color:#1b2e4b;box-shadow:0 20px 60px #0009}body.dark .modal-title{border-bottom-color:#253958}body.dark .modal-actions{border-top-color:#253958}body.dark .modal-close-btn:hover{background-color:#253958}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], _titleComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ModalTitleComponent), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class ModalContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalContentComponent, isStandalone: true, selector: "ls-modal-content", host: { classAttribute: "modal-content" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-content' },
+                    imports: [],
+                    selector: 'ls-modal-content',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class PopoverComponent {
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
+        this._document = inject(DOCUMENT);
+        this._elementRef = inject(ElementRef);
+        this._cleanupScroll = null;
+        this.placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+        this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+        this.autoFlip = input(true, ...(ngDevMode ? [{ debugName: "autoFlip" }] : []));
+        this.trigger = input(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.onOpened = output();
+        this.onHidden = output();
+        this._panelRef = viewChild('panelRef', ...(ngDevMode ? [{ debugName: "_panelRef" }] : []));
+        this._currentPlacement = signal('bottom', ...(ngDevMode ? [{ debugName: "_currentPlacement" }] : []));
+        this._isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isAnimating" }] : []));
+        this._cleanupClickOutside = null;
+        this._cleanupEscape = null;
+        this._hoverBridgeTimeout = null;
+        this._wasOpen = false;
+        this._panelClasses = computed(() => ['popover-panel', `popover-${this._currentPlacement()}`].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
+        this._arrowClasses = computed(() => `popover-arrow popover-arrow-${this._currentPlacement()}`, ...(ngDevMode ? [{ debugName: "_arrowClasses" }] : []));
+        effect(() => {
+            const isOpen = this.isOpen();
+            untracked(() => {
+                if (isOpen) {
+                    this._currentPlacement.set(this.placement());
+                    this._isAnimating.set(true);
+                    this._setupListeners();
+                    setTimeout(() => {
+                        if (this.isOpen()) {
+                            this._computePosition();
+                        }
+                    }, 0);
+                    this._wasOpen = true;
+                }
+                else if (this._wasOpen) {
+                    this._isAnimating.set(true);
+                    this._wasOpen = false;
+                }
+                else {
+                    this._removeListeners();
+                }
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            this._removeListeners();
+            if (this._hoverBridgeTimeout) {
+                clearTimeout(this._hoverBridgeTimeout);
+            }
+        });
+    }
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    _onAnimationEnd() {
+        this._isAnimating.set(false);
+        if (this.isOpen()) {
+            this.onOpened.emit();
+        }
+        else {
+            this._removeListeners();
+            this.onHidden.emit();
+        }
+    }
+    _onPanelMouseEnter() {
+        if (this._hoverBridgeTimeout) {
+            clearTimeout(this._hoverBridgeTimeout);
+            this._hoverBridgeTimeout = null;
+        }
+    }
+    _onPanelMouseLeave() {
+        this._hoverBridgeTimeout = setTimeout(() => this.close(), 100);
+    }
+    _computePosition() {
+        const anchor = this.trigger() ??
+            this._elementRef.nativeElement.parentElement;
+        const panel = this._panelRef()?.nativeElement;
+        if (!anchor || !panel)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const offset = this.offset();
+        let placement = this._currentPlacement();
+        if (this.autoFlip()) {
+            placement = this._getFlippedPlacement(placement, anchorRect, panelRect, offset);
+            this._currentPlacement.set(placement);
+        }
+        let top = 0;
+        let left = 0;
+        switch (placement) {
+            case 'top':
+                top = anchorRect.top - panelRect.height - offset;
+                left =
+                    anchorRect.left +
+                        (anchorRect.width - panelRect.width) / 2;
+                break;
+            case 'bottom':
+                top = anchorRect.bottom + offset;
+                left =
+                    anchorRect.left +
+                        (anchorRect.width - panelRect.width) / 2;
+                break;
+            case 'left':
+                top =
+                    anchorRect.top +
+                        (anchorRect.height - panelRect.height) / 2;
+                left = anchorRect.left - panelRect.width - offset;
+                break;
+            case 'right':
+                top =
+                    anchorRect.top +
+                        (anchorRect.height - panelRect.height) / 2;
+                left = anchorRect.right + offset;
+                break;
+        }
+        panel.style.setProperty('--popover-top', `${top}px`);
+        panel.style.setProperty('--popover-left', `${left}px`);
+    }
+    _getFlippedPlacement(placement, anchorRect, panelRect, offset) {
+        const viewportWidth = this._document.defaultView?.innerWidth ?? 0;
+        const viewportHeight = this._document.defaultView?.innerHeight ?? 0;
+        const opposites = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+        };
+        switch (placement) {
+            case 'top':
+                if (anchorRect.top - panelRect.height - offset < 0) {
+                    return opposites[placement];
+                }
+                break;
+            case 'bottom':
+                if (anchorRect.bottom + panelRect.height + offset >
+                    viewportHeight) {
+                    return opposites[placement];
+                }
+                break;
+            case 'left':
+                if (anchorRect.left - panelRect.width - offset < 0) {
+                    return opposites[placement];
+                }
+                break;
+            case 'right':
+                if (anchorRect.right + panelRect.width + offset >
+                    viewportWidth) {
+                    return opposites[placement];
+                }
+                break;
+        }
+        return placement;
+    }
+    _setupListeners() {
+        this._removeListeners();
+        this._cleanupClickOutside = this._renderer.listen(this._document, 'click', (event) => {
+            const anchor = this.trigger() ??
+                this._elementRef.nativeElement.parentElement;
+            const panel = this._panelRef()?.nativeElement;
+            const target = event.target;
+            if (panel &&
+                !panel.contains(target) &&
+                anchor &&
+                !anchor.contains(target)) {
+                this.close();
+            }
+        });
+        this._cleanupEscape = this._renderer.listen(this._document, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        });
+        this._cleanupScroll = this._renderer.listen('window', 'scroll', () => {
+            if (this.isOpen()) {
+                this.close();
+            }
+        }, { capture: true });
+    }
+    _removeListeners() {
+        if (this._cleanupClickOutside) {
+            this._cleanupClickOutside();
+            this._cleanupClickOutside = null;
+        }
+        if (this._cleanupEscape) {
+            this._cleanupEscape();
+            this._cleanupEscape = null;
+        }
+        if (this._cleanupScroll) {
+            this._cleanupScroll();
+            this._cleanupScroll = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: PopoverComponent, isStandalone: true, selector: "ls-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, autoFlip: { classPropertyName: "autoFlip", publicName: "autoFlip", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onOpened: "onOpened", onHidden: "onHidden" }, viewQueries: [{ propertyName: "_panelRef", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isOpen() || _isAnimating()) {
+      <div
+        [class]="_panelClasses()"
+        [class.popover-enter]="isOpen() && _isAnimating()"
+        [class.popover-exit]="!isOpen() && _isAnimating()"
+        (animationend)="_onAnimationEnd()"
+        (mouseenter)="_onPanelMouseEnter()"
+        (mouseleave)="_onPanelMouseLeave()"
+        role="dialog"
+        aria-modal="false"
+        #panelRef>
+        @if (showArrow()) {
+          <span [class]="_arrowClasses()"></span>
+        }
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.popover-panel{position:fixed;top:var(--popover-top, 0);left:var(--popover-left, 0);z-index:1050;background:var(--ls-color-white, #fff);border:1px solid var(--ls-color-border, #e0e6ed);border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:12px 16px;animation-duration:.15s;animation-fill-mode:both;animation-timing-function:ease-out}.popover-enter{animation-name:popoverFadeIn}.popover-exit{animation-name:popoverFadeOut}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popoverFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.popover-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;transform:rotate(45deg);z-index:-1}.popover-arrow-top{bottom:-6px;left:50%;margin-left:-5px;border-top:0;border-left:0}.popover-arrow-bottom{top:-6px;left:50%;margin-left:-5px;border-bottom:0;border-right:0}.popover-arrow-left{right:-6px;top:50%;margin-top:-5px;border-bottom:0;border-left:0}.popover-arrow-right{left:-6px;top:50%;margin-top:-5px;border-top:0;border-right:0}:host-context(body.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important;box-shadow:0 4px 16px #00000080!important}:host-context(.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-popover', standalone: true, template: `
+    @if (isOpen() || _isAnimating()) {
+      <div
+        [class]="_panelClasses()"
+        [class.popover-enter]="isOpen() && _isAnimating()"
+        [class.popover-exit]="!isOpen() && _isAnimating()"
+        (animationend)="_onAnimationEnd()"
+        (mouseenter)="_onPanelMouseEnter()"
+        (mouseleave)="_onPanelMouseLeave()"
+        role="dialog"
+        aria-modal="false"
+        #panelRef>
+        @if (showArrow()) {
+          <span [class]="_arrowClasses()"></span>
+        }
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}.popover-panel{position:fixed;top:var(--popover-top, 0);left:var(--popover-left, 0);z-index:1050;background:var(--ls-color-white, #fff);border:1px solid var(--ls-color-border, #e0e6ed);border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:12px 16px;animation-duration:.15s;animation-fill-mode:both;animation-timing-function:ease-out}.popover-enter{animation-name:popoverFadeIn}.popover-exit{animation-name:popoverFadeOut}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popoverFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.popover-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;transform:rotate(45deg);z-index:-1}.popover-arrow-top{bottom:-6px;left:50%;margin-left:-5px;border-top:0;border-left:0}.popover-arrow-bottom{top:-6px;left:50%;margin-left:-5px;border-bottom:0;border-right:0}.popover-arrow-left{right:-6px;top:50%;margin-top:-5px;border-bottom:0;border-left:0}.popover-arrow-right{left:-6px;top:50%;margin-top:-5px;border-top:0;border-right:0}:host-context(body.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important;box-shadow:0 4px 16px #00000080!important}:host-context(.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], autoFlip: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFlip", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onHidden: [{ type: i0.Output, args: ["onHidden"] }], _panelRef: [{ type: i0.ViewChild, args: ['panelRef', { isSignal: true }] }] } });
+
+let nextId = 0;
+class TooltipComponent {
+    constructor() {
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.backgroundClass = input('dark', ...(ngDevMode ? [{ debugName: "backgroundClass" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this._isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+        this._tooltipId = `ls-tooltip-${nextId++}`;
+    }
+    get tooltipClasses() {
+        return [
+            'tooltip-box',
+            `tooltip-${this.placement()}`,
+            `tooltip-bg-${this.backgroundClass()}`,
+        ].join(' ');
+    }
+    show() {
+        this._isVisible.set(true);
+    }
+    hide() {
+        this._isVisible.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TooltipComponent, isStandalone: true, selector: "ls-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, backgroundClass: { classPropertyName: "backgroundClass", publicName: "backgroundClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="ls-tooltip-trigger"
+      [class.ls-tooltip-disabled]="disabled()"
+      [attr.aria-describedby]="disabled() ? null : _tooltipId"
+      (mouseenter)="show()"
+      (mouseleave)="hide()"
+      (focus)="show()"
+      (blur)="hide()">
+      <ng-content />
+      @if (_isVisible() && !disabled()) {
+        <span
+          [id]="_tooltipId"
+          role="tooltip"
+          [attr.aria-hidden]="!_isVisible()"
+          [class]="tooltipClasses">
+          {{ content() }}
+          <span class="tooltip-arrow"></span>
+        </span>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:contents}.ls-tooltip-trigger{position:relative;display:inline-flex}.ls-tooltip-disabled{pointer-events:none}.tooltip-box{position:absolute;z-index:10;padding:2px 8px;border-radius:6px;font-family:var(--ls-font-family);font-size:.8rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltip-fade-in var(--ls-transition-duration) ease forwards}@keyframes tooltip-fade-in{0%{opacity:0}to{opacity:1}}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:0;height:0;border:6px solid transparent}.tooltip-top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none;border-top-color:inherit}.tooltip-bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none;border-bottom-color:inherit}.tooltip-left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none;border-left-color:inherit}.tooltip-right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none;border-right-color:inherit}.tooltip-bg-primary{background-color:var(--ls-color-primary);color:#fff;border-color:var(--ls-color-primary)}.tooltip-bg-success{background-color:var(--ls-color-success);color:#fff;border-color:var(--ls-color-success)}.tooltip-bg-info{background-color:var(--ls-color-info);color:#fff;border-color:var(--ls-color-info)}.tooltip-bg-danger{background-color:var(--ls-color-danger);color:#fff;border-color:var(--ls-color-danger)}.tooltip-bg-warning{background-color:var(--ls-color-warning);color:#fff;border-color:var(--ls-color-warning)}.tooltip-bg-secondary{background-color:var(--ls-color-secondary);color:#fff;border-color:var(--ls-color-secondary)}.tooltip-bg-dark{background-color:var(--ls-color-dark);color:#fff;border-color:var(--ls-color-dark)}body.dark .tooltip-bg-dark{background-color:#e0e6ed;color:var(--ls-color-dark);border-color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-tooltip', standalone: true, template: `
+    <span
+      class="ls-tooltip-trigger"
+      [class.ls-tooltip-disabled]="disabled()"
+      [attr.aria-describedby]="disabled() ? null : _tooltipId"
+      (mouseenter)="show()"
+      (mouseleave)="hide()"
+      (focus)="show()"
+      (blur)="hide()">
+      <ng-content />
+      @if (_isVisible() && !disabled()) {
+        <span
+          [id]="_tooltipId"
+          role="tooltip"
+          [attr.aria-hidden]="!_isVisible()"
+          [class]="tooltipClasses">
+          {{ content() }}
+          <span class="tooltip-arrow"></span>
+        </span>
+      }
+    </span>
+  `, styles: [":host{display:contents}.ls-tooltip-trigger{position:relative;display:inline-flex}.ls-tooltip-disabled{pointer-events:none}.tooltip-box{position:absolute;z-index:10;padding:2px 8px;border-radius:6px;font-family:var(--ls-font-family);font-size:.8rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltip-fade-in var(--ls-transition-duration) ease forwards}@keyframes tooltip-fade-in{0%{opacity:0}to{opacity:1}}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:0;height:0;border:6px solid transparent}.tooltip-top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none;border-top-color:inherit}.tooltip-bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none;border-bottom-color:inherit}.tooltip-left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none;border-left-color:inherit}.tooltip-right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none;border-right-color:inherit}.tooltip-bg-primary{background-color:var(--ls-color-primary);color:#fff;border-color:var(--ls-color-primary)}.tooltip-bg-success{background-color:var(--ls-color-success);color:#fff;border-color:var(--ls-color-success)}.tooltip-bg-info{background-color:var(--ls-color-info);color:#fff;border-color:var(--ls-color-info)}.tooltip-bg-danger{background-color:var(--ls-color-danger);color:#fff;border-color:var(--ls-color-danger)}.tooltip-bg-warning{background-color:var(--ls-color-warning);color:#fff;border-color:var(--ls-color-warning)}.tooltip-bg-secondary{background-color:var(--ls-color-secondary);color:#fff;border-color:var(--ls-color-secondary)}.tooltip-bg-dark{background-color:var(--ls-color-dark);color:#fff;border-color:var(--ls-color-dark)}body.dark .tooltip-bg-dark{background-color:#e0e6ed;color:var(--ls-color-dark);border-color:#e0e6ed}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], backgroundClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuComponent, MenuItemComponent, MenuTriggerDirective, ModalActionsComponent, ModalComponent, ModalContentComponent, ModalStackService, ModalTitleComponent, PopoverComponent, TooltipComponent };
+//# sourceMappingURL=lumston-ds-angular-src-overlay.mjs.map