le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-side-panel/le-side-panel.js

@@ -1,948 +0,0 @@
-import { Build, h, } from "@stencil/core";
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-function readCssVariablePixels(varName) {
-    if (!Build.isBrowser) {
-        return undefined;
-    }
-    const v = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-    if (!v) {
-        return undefined;
-    }
-    const parsed = Number.parseFloat(v);
-    return Number.isFinite(parsed) ? parsed : undefined;
-}
-function parseCollapseAtPx(value) {
-    if (!value) {
-        return undefined;
-    }
-    const trimmed = value.trim();
-    if (!trimmed) {
-        return undefined;
-    }
-    if (trimmed.startsWith('--')) {
-        const fromVar = readCssVariablePixels(trimmed);
-        return fromVar;
-    }
-    const numeric = Number.parseFloat(trimmed);
-    return Number.isFinite(numeric) ? numeric : undefined;
-}
-export class LeSidePanel {
-    constructor() {
-        /** Which side the panel is attached to. */
-        this.side = 'start';
-        /** Behavior when in narrow mode. */
-        this.narrowBehavior = 'overlay';
-        /**
-         * Panel open state for narrow mode.
-         * - overlay: controls modal drawer visibility
-         * - push: controls whether panel is shown (non-modal)
-         */
-        this.open = false;
-        /** Panel collapsed state for wide mode (fully hidden). */
-        this.collapsed = false;
-        /** Default panel width in pixels. */
-        this.panelWidth = 280;
-        /** Minimum allowed width when resizable. */
-        this.minPanelWidth = 220;
-        /** Maximum allowed width when resizable. */
-        this.maxPanelWidth = 420;
-        /** Allows users to resize the panel by dragging its edge. */
-        this.resizable = false;
-        /** Show a close button inside the panel (primarily used in narrow overlay mode). */
-        this.showCloseButton = true;
-        /** When crossing to wide mode, automatically show the panel (collapsed=false). */
-        this.autoShowOnWide = true;
-        /** When crossing to narrow mode, automatically hide the panel (open=false). */
-        this.autoHideOnNarrow = true;
-        /** Accessible label for the panel navigation region. */
-        this.panelLabel = 'Navigation';
-        this.isNarrow = false;
-        this.responsiveReady = false;
-        this.overlayMounted = false;
-        this.overlayVisible = false;
-        this.resizing = false;
-        this.suppressAnimation = false;
-        this.firstLayoutComplete = false;
-        this.onOverlayTransitionEnd = (ev) => {
-            if (ev.target !== this.overlayWrapEl) {
-                return;
-            }
-            if (ev.propertyName !== 'transform') {
-                return;
-            }
-            const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
-            if (!shouldUseOverlay) {
-                return;
-            }
-            if (!this.open && !this.overlayVisible) {
-                this.overlayMounted = false;
-            }
-        };
-        this.onOverlayPointerDown = (ev) => {
-            // Close on any click outside the panel.
-            const panel = this.panelEl;
-            if (!panel) {
-                return;
-            }
-            const path = ev.composedPath();
-            if (!path.includes(panel)) {
-                this.open = false;
-            }
-        };
-        this.startResizeDrag = (ev) => {
-            if (!this.resizable) {
-                return;
-            }
-            // No resizing if fully hidden.
-            if (!this.isNarrow && this.collapsed) {
-                return;
-            }
-            if (this.isNarrow && this.narrowBehavior === 'overlay' && !this.open) {
-                return;
-            }
-            if (this.isNarrow && this.narrowBehavior === 'push' && !this.open) {
-                return;
-            }
-            this.resizing = true;
-            this.dragPointerId = ev.pointerId;
-            this.dragStartX = ev.clientX;
-            this.dragStartWidth = this.currentWidthPx;
-            ev.currentTarget?.setPointerCapture?.(ev.pointerId);
-            window.addEventListener('pointermove', this.onResizeDragMove, { passive: false });
-            window.addEventListener('pointerup', this.onResizeDragEnd, { passive: true });
-            window.addEventListener('pointercancel', this.onResizeDragEnd, { passive: true });
-        };
-        this.onResizeDragMove = (ev) => {
-            if (!this.resizing || this.dragPointerId !== ev.pointerId) {
-                return;
-            }
-            ev.preventDefault();
-            const startX = this.dragStartX ?? ev.clientX;
-            const startWidth = this.dragStartWidth ?? this.currentWidthPx;
-            const delta = ev.clientX - startX;
-            const dir = this.side === 'start' ? 1 : -1;
-            const nextWidth = clamp(startWidth + delta * dir, this.minPanelWidth, this.maxPanelWidth);
-            this.currentWidthPx = nextWidth;
-            this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
-        };
-        this.onResizeDragEnd = (ev) => {
-            if (!this.resizing || this.dragPointerId !== ev.pointerId) {
-                return;
-            }
-            this.resizing = false;
-            this.dragPointerId = undefined;
-            this.dragStartX = undefined;
-            this.dragStartWidth = undefined;
-            this.teardownDragListeners();
-            this.persistState();
-            this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
-        };
-    }
-    connectedCallback() {
-        this.restorePersistedState();
-        this.currentWidthPx = clamp(this.currentWidthPx || this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
-        if (Build.isBrowser && 'ResizeObserver' in window) {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.recomputeNarrow();
-            });
-            this.resizeObserver.observe(this.el);
-        }
-        // Ensure we get at least one post-layout measurement.
-        if (Build.isBrowser) {
-            requestAnimationFrame(() => this.recomputeNarrow());
-        }
-    }
-    componentWillLoad() {
-        this.recomputeNarrow();
-    }
-    disconnectedCallback() {
-        this.resizeObserver?.disconnect();
-        this.teardownDragListeners();
-    }
-    isModalOverlayActive() {
-        return this.isNarrow && this.narrowBehavior === 'overlay' && this.open;
-    }
-    syncOverlayToState() {
-        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
-        if (!shouldUseOverlay) {
-            this.overlayVisible = false;
-            this.overlayMounted = false;
-            return;
-        }
-        if (this.open) {
-            if (!this.overlayMounted) {
-                this.overlayMounted = true;
-                this.overlayVisible = false;
-                requestAnimationFrame(() => {
-                    if (this.isNarrow && this.narrowBehavior === 'overlay' && this.open) {
-                        this.overlayVisible = true;
-                        this.focusFirstInsidePanel();
-                    }
-                });
-            }
-            return;
-        }
-        // Closed: allow unmount to be handled by transition end / fallback timeout.
-        this.overlayVisible = false;
-    }
-    onPanelWidthChanged() {
-        if (!Number.isFinite(this.panelWidth)) {
-            return;
-        }
-        if (!this.resizing) {
-            this.currentWidthPx = clamp(this.panelWidth || 280, this.minPanelWidth || 220, this.maxPanelWidth || 800);
-            this.persistState();
-        }
-    }
-    onCollapsedChanged() {
-        this.persistState();
-        this.leSidePanelCollapsedChange.emit({ collapsed: this.collapsed, panelId: this.panelId });
-    }
-    onOpenChanged(newValue) {
-        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
-        if (!shouldUseOverlay) {
-            this.persistState();
-            this.leSidePanelOpenChange.emit({ open: this.open, panelId: this.panelId });
-            return;
-        }
-        if (newValue) {
-            this.focusedBeforeOpen = document.activeElement || null;
-            this.overlayMounted = true;
-            this.overlayVisible = false;
-            requestAnimationFrame(() => {
-                this.overlayVisible = true;
-                this.focusFirstInsidePanel();
-            });
-        }
-        else {
-            this.overlayVisible = false;
-            this.persistState();
-            this.restoreFocusAfterClose();
-            // Fallback: if transitionend doesn't fire, ensure overlay unmounts.
-            // (e.g. interrupted transitions or unusual browser behavior)
-            window.setTimeout(() => {
-                const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
-                if (shouldUseOverlay && !this.open && !this.overlayVisible) {
-                    this.overlayMounted = false;
-                }
-            }, 350);
-        }
-        this.leSidePanelOpenChange.emit({ open: this.open, panelId: this.panelId });
-    }
-    onResponsivePropChanged() {
-        this.recomputeNarrow();
-    }
-    onDocumentKeyDown(ev) {
-        if (!Build.isBrowser) {
-            return;
-        }
-        if (!this.isModalOverlayActive()) {
-            return;
-        }
-        if (ev.key === 'Escape') {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.open = false;
-            return;
-        }
-        if (ev.key !== 'Tab') {
-            return;
-        }
-        const panel = this.panelEl;
-        if (!panel) {
-            return;
-        }
-        const focusables = this.getFocusableElements(panel);
-        if (focusables.length === 0) {
-            ev.preventDefault();
-            try {
-                panel.focus();
-            }
-            catch {
-                // ignore
-            }
-            return;
-        }
-        const first = focusables[0];
-        const last = focusables[focusables.length - 1];
-        const active = document.activeElement;
-        if (ev.shiftKey) {
-            if (!active || active === first || !panel.contains(active)) {
-                ev.preventDefault();
-                try {
-                    last.focus();
-                }
-                catch {
-                    // ignore
-                }
-            }
-        }
-        else {
-            if (active === last) {
-                ev.preventDefault();
-                try {
-                    first.focus();
-                }
-                catch {
-                    // ignore
-                }
-            }
-        }
-    }
-    onToggleRequest(ev) {
-        const detail = ev.detail;
-        if (!detail || !detail.action) {
-            return;
-        }
-        // panelId matching rules:
-        // - If this panel has panelId: respond only when detail.panelId matches.
-        // - If this panel has no panelId: respond only when detail.panelId is empty.
-        const requestedId = detail.panelId || '';
-        const myId = this.panelId || '';
-        if (myId !== requestedId) {
-            return;
-        }
-        if (this.isNarrow) {
-            this.applyActionToOpen(detail.action);
-        }
-        else {
-            this.applyActionToCollapsed(detail.action);
-        }
-    }
-    applyActionToOpen(action) {
-        if (action === 'open') {
-            this.open = true;
-            return;
-        }
-        if (action === 'close') {
-            this.open = false;
-            return;
-        }
-        this.open = !this.open;
-    }
-    applyActionToCollapsed(action) {
-        if (action === 'open') {
-            this.collapsed = false;
-            return;
-        }
-        if (action === 'close') {
-            this.collapsed = true;
-            return;
-        }
-        this.collapsed = !this.collapsed;
-    }
-    recomputeNarrow() {
-        const collapseAtPx = parseCollapseAtPx(this.collapseAt);
-        if (!collapseAtPx) {
-            this.isNarrow = false;
-            this.responsiveReady = true;
-            this.syncOverlayToState();
-            return;
-        }
-        const width = this.el.clientWidth;
-        // If we can't measure yet (common on first paint), don't guess a mode.
-        // This prevents a brief "wide" flash before ResizeObserver kicks in.
-        if (!(width > 0)) {
-            this.responsiveReady = false;
-            return;
-        }
-        this.responsiveReady = true;
-        // Suppress animation on the very first successful layout
-        if (!this.firstLayoutComplete) {
-            this.suppressAnimation = true;
-            this.firstLayoutComplete = true;
-            setTimeout(() => {
-                // We need a timeout to ensure the paint
-                // has happened without transition
-                this.suppressAnimation = false;
-            }, 1000);
-        }
-        const nextIsNarrow = width < collapseAtPx;
-        const prevIsNarrow = this.isNarrow;
-        this.isNarrow = nextIsNarrow;
-        if (prevIsNarrow !== nextIsNarrow) {
-            if (nextIsNarrow) {
-                if (this.autoHideOnNarrow) {
-                    this.open = false;
-                }
-            }
-            else {
-                // entering wide mode
-                this.open = false;
-                this.overlayVisible = false;
-                this.overlayMounted = false;
-                if (this.autoShowOnWide) {
-                    this.collapsed = false;
-                }
-            }
-        }
-        this.syncOverlayToState();
-    }
-    restorePersistedState() {
-        if (!Build.isBrowser || !this.persistKey) {
-            return;
-        }
-        try {
-            const raw = window.localStorage.getItem(this.persistKey);
-            if (!raw) {
-                return;
-            }
-            const parsed = JSON.parse(raw);
-            if (typeof parsed.width === 'number' && Number.isFinite(parsed.width)) {
-                this.currentWidthPx = parsed.width;
-            }
-            if (typeof parsed.collapsed === 'boolean') {
-                this.collapsed = parsed.collapsed;
-            }
-        }
-        catch {
-            // ignore
-        }
-    }
-    persistState() {
-        if (!Build.isBrowser || !this.persistKey) {
-            return;
-        }
-        const payload = {
-            width: this.currentWidthPx,
-            collapsed: this.collapsed,
-        };
-        try {
-            window.localStorage.setItem(this.persistKey, JSON.stringify(payload));
-        }
-        catch {
-            // ignore
-        }
-    }
-    focusFirstInsidePanel() {
-        if (!Build.isBrowser) {
-            return;
-        }
-        const root = this.panelEl;
-        if (!root) {
-            return;
-        }
-        const candidates = this.getFocusableElements(root);
-        for (const el of candidates) {
-            if (el.hasAttribute('disabled')) {
-                continue;
-            }
-            const tabindex = el.getAttribute('tabindex');
-            if (tabindex === '-1') {
-                continue;
-            }
-            try {
-                el.focus();
-                return;
-            }
-            catch {
-                // ignore
-            }
-        }
-    }
-    getFocusableElements(root) {
-        const selector = 'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])';
-        const all = Array.from(root.querySelectorAll(selector));
-        return all.filter(el => {
-            if (el.hasAttribute('disabled')) {
-                return false;
-            }
-            const tabindex = el.getAttribute('tabindex');
-            if (tabindex === '-1') {
-                return false;
-            }
-            return true;
-        });
-    }
-    restoreFocusAfterClose() {
-        if (!Build.isBrowser) {
-            return;
-        }
-        const prev = this.focusedBeforeOpen;
-        this.focusedBeforeOpen = null;
-        if (prev && document.contains(prev)) {
-            try {
-                prev.focus();
-            }
-            catch {
-                // ignore
-            }
-        }
-    }
-    teardownDragListeners() {
-        window.removeEventListener('pointermove', this.onResizeDragMove);
-        window.removeEventListener('pointerup', this.onResizeDragEnd);
-        window.removeEventListener('pointercancel', this.onResizeDragEnd);
-    }
-    renderPanelInner(opts) {
-        const renderPanelSlot = opts?.renderPanelSlot ?? true;
-        const showClose = this.showCloseButton && this.isNarrow && this.narrowBehavior === 'overlay';
-        const tabIndex = this.isNarrow && this.narrowBehavior === 'overlay' ? -1 : null;
-        return (h("div", { class: {
-                panel: true,
-                start: this.side === 'start',
-                end: this.side === 'end',
-                resizing: this.resizing,
-            }, part: "panel", ref: el => (this.panelEl = el), role: "navigation", "aria-label": this.panelLabel, tabindex: tabIndex }, showClose ? (h("le-side-panel-toggle", { "panel-id": "demo-side", action: "toggle", shortcut: "Mod+B", variant: "clear", class: "close", part: "close-button", "aria-label": "Close panel", "icon-only": "true", style: {
-                '--le-button-icon-only-padding': 'var(--le-space-sm)',
-            }, onClick: () => (this.open = false) }, h("slot", { name: "close-icon", slot: "icon-only" }, h("le-icon", { name: "side-panel" })))) : null, h("div", { class: "panel-scroller", part: "panel-scroller" }, renderPanelSlot ? h("slot", { name: "panel" }) : null), this.resizable ? (h("div", { class: {
-                handle: true,
-                start: this.side === 'start',
-                end: this.side === 'end',
-            }, part: "resize-handle", role: "separator", "aria-orientation": "vertical", tabindex: -1, onPointerDown: this.startResizeDrag })) : null));
-    }
-    render() {
-        const widthStyle = {
-            '--le-side-panel-width': `${this.currentWidthPx}px`,
-        };
-        const isOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
-        const isModalOverlayOpen = isOverlay && this.open;
-        const allowPanel = this.responsiveReady;
-        const showWidePanel = allowPanel && !this.isNarrow && !this.collapsed;
-        const showNarrowPushPanel = allowPanel && this.isNarrow && this.narrowBehavior === 'push' && this.open;
-        const layoutHasInlinePanel = showWidePanel || showNarrowPushPanel;
-        return (h("div", { key: 'd4524327e7e13541b27c0fd13a5ec4c4605a4796', class: {
-                host: true,
-                narrow: this.isNarrow,
-                wide: !this.isNarrow,
-                overlay: isOverlay,
-                push: !isOverlay,
-                collapsed: !this.isNarrow && this.collapsed,
-            }, style: widthStyle, "data-resizing": this.resizing ? 'true' : null }, h("div", { key: 'f3c174390306054397a9627cad446d99c183251b', class: {
-                'layout': true,
-                'has-panel': layoutHasInlinePanel,
-                'start': this.side === 'start',
-                'end': this.side === 'end',
-            } }, h("div", { key: 'b679883619cbe69bac251cd5f246634f48ddffdf', class: {
-                'inlinePanel': true,
-                'hidden': !layoutHasInlinePanel,
-                'no-transition': this.suppressAnimation,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: 'a7a3b2ee5001c5cf550becd872dc621095fff877', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '60ea6042d270ae9dd887034fc44da4fb91e394ec' }))), allowPanel && isOverlay && this.overlayMounted ? (h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, h("div", { class: {
-                overlayPanelWrap: true,
-                visible: this.overlayVisible,
-                start: this.side === 'start',
-                end: this.side === 'end',
-            }, part: "overlay", ref: el => (this.overlayWrapEl = el), onTransitionEnd: this.onOverlayTransitionEnd, role: "dialog", "aria-modal": "true" }, this.renderPanelInner({ renderPanelSlot: true })))) : null));
-    }
-    static get is() { return "le-side-panel"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-side-panel.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-side-panel.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "panelId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional id used to match toggle requests.\nIf set, the panel only responds to toggle events with the same `panelId`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "panel-id"
-            },
-            "side": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeSidePanelSide",
-                    "resolved": "\"end\" | \"start\"",
-                    "references": {
-                        "LeSidePanelSide": {
-                            "location": "local",
-                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-side-panel/le-side-panel.tsx",
-                            "id": "src/components/le-side-panel/le-side-panel.tsx::LeSidePanelSide"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Which side the panel is attached to."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "side",
-                "defaultValue": "'start'"
-            },
-            "collapseAt": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters \"narrow\" mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "collapse-at"
-            },
-            "narrowBehavior": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeSidePanelNarrowBehavior",
-                    "resolved": "\"overlay\" | \"push\"",
-                    "references": {
-                        "LeSidePanelNarrowBehavior": {
-                            "location": "local",
-                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-side-panel/le-side-panel.tsx",
-                            "id": "src/components/le-side-panel/le-side-panel.tsx::LeSidePanelNarrowBehavior"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Behavior when in narrow mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "narrow-behavior",
-                "defaultValue": "'overlay'"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Panel open state for narrow mode.\n- overlay: controls modal drawer visibility\n- push: controls whether panel is shown (non-modal)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
-            },
-            "collapsed": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Panel collapsed state for wide mode (fully hidden)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "collapsed",
-                "defaultValue": "false"
-            },
-            "panelWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Default panel width in pixels."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "panel-width",
-                "defaultValue": "280"
-            },
-            "minPanelWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum allowed width when resizable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-panel-width",
-                "defaultValue": "220"
-            },
-            "maxPanelWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum allowed width when resizable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-panel-width",
-                "defaultValue": "420"
-            },
-            "resizable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Allows users to resize the panel by dragging its edge."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "resizable",
-                "defaultValue": "false"
-            },
-            "persistKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When set, panel width + collapsed state are persisted in localStorage."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "persist-key"
-            },
-            "showCloseButton": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show a close button inside the panel (primarily used in narrow overlay mode)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-close-button",
-                "defaultValue": "true"
-            },
-            "autoShowOnWide": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When crossing to wide mode, automatically show the panel (collapsed=false)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "auto-show-on-wide",
-                "defaultValue": "true"
-            },
-            "autoHideOnNarrow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When crossing to narrow mode, automatically hide the panel (open=false)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "auto-hide-on-narrow",
-                "defaultValue": "true"
-            },
-            "panelLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Accessible label for the panel navigation region."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "panel-label",
-                "defaultValue": "'Navigation'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isNarrow": {},
-            "responsiveReady": {},
-            "overlayMounted": {},
-            "overlayVisible": {},
-            "currentWidthPx": {},
-            "resizing": {},
-            "suppressAnimation": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leSidePanelOpenChange",
-                "name": "leSidePanelOpenChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ open: boolean; panelId?: string }",
-                    "resolved": "{ open: boolean; panelId?: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leSidePanelCollapsedChange",
-                "name": "leSidePanelCollapsedChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ collapsed: boolean; panelId?: string }",
-                    "resolved": "{ collapsed: boolean; panelId?: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leSidePanelWidthChange",
-                "name": "leSidePanelWidthChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ width: number; panelId?: string }",
-                    "resolved": "{ width: number; panelId?: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "panelWidth",
-                "methodName": "onPanelWidthChanged"
-            }, {
-                "propName": "collapsed",
-                "methodName": "onCollapsedChanged"
-            }, {
-                "propName": "open",
-                "methodName": "onOpenChanged"
-            }, {
-                "propName": "collapseAt",
-                "methodName": "onResponsivePropChanged"
-            }, {
-                "propName": "narrowBehavior",
-                "methodName": "onResponsivePropChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "onDocumentKeyDown",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "leSidePanelRequestToggle",
-                "method": "onToggleRequest",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=le-side-panel.js.map