le-kit 0.5.2 → 0.5.4

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

@@ -1,660 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, Build, h, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$9, f as defineCustomElement$a, g as defineCustomElement$b } from './le-button2.js';
-import { d as defineCustomElement$8 } from './le-icon2.js';
-import { d as defineCustomElement$7 } from './le-popover2.js';
-import { d as defineCustomElement$4 } from './le-side-panel-toggle2.js';
-
-const leSidePanelCss = () => `:host{display:block;height:100%;--le-side-panel-width:280px;--le-side-panel-margin:0px;--le-side-panel-backdrop:var(--le-color-backdrop);--le-side-panel-border-radius:var(--le-radius-lg)}.host{position:relative;height:100%;min-height:0}.layout{display:flex;align-items:stretch;min-width:0;height:100%;min-height:0}.layout.start{flex-direction:row}.layout.end{flex-direction:row-reverse}.inlinePanel{flex:0 0 auto;width:var(--le-side-panel-width);min-width:0;height:100%;overflow:hidden;transition:width var(--le-side-panel-transition, var(--le-transition-normal))}.inlinePanel.hidden{width:0}.inlinePanel .panel{transform:translateX(0);opacity:1;transition:transform var(--le-side-panel-transition, var(--le-transition-normal)),
-    opacity var(--le-side-panel-transition, var(--le-transition-normal))}.layout.start .inlinePanel.hidden .panel{transform:translateX(-100%);opacity:0;pointer-events:none}.layout.end .inlinePanel.hidden .panel{transform:translateX(100%);opacity:0;pointer-events:none}.content{flex:1 1 auto;min-width:0;height:100%;min-height:0}.panel{position:relative;height:100%;max-height:min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));margin:var(--le-side-panel-margin);border-radius:var(--le-side-panel-border-radius);background:var(--le-color-surface, #fff);color:var(--le-color-text, #000);border-right:1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));box-sizing:border-box}.panel.end{border-right:0;border-left:1px solid var(--le-color-border, rgba(0, 0, 0, 0.12))}.panel-scroller{height:100%;overflow:auto}.close{position:absolute;top:4px;right:4px;z-index:1;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}.handle{position:absolute;top:0;bottom:0;width:10px;cursor:col-resize}.handle.start{right:-5px}.handle.end{left:-5px}.overlayRoot{position:absolute;inset:0;background:var(--le-side-panel-backdrop);z-index:var(--le-z-modal-backdrop, 1040);opacity:0;pointer-events:none;transition:opacity var(--le-side-panel-transition, var(--le-transition-normal));height:100%}.overlayRoot.visible{opacity:1;pointer-events:auto}.overlayPanelWrap{position:absolute;top:0;bottom:0;width:min(100%, var(--le-side-panel-width));height:100%;z-index:var(--le-z-modal, 1050);display:flex;align-items:stretch}.overlayPanelWrap.start{left:0;transform:translateX(-100%)}.overlayPanelWrap.end{right:0;transform:translateX(100%)}.overlayPanelWrap.visible.start,.overlayPanelWrap.visible.end{transform:translateX(0)}.overlayPanelWrap{transition:transform var(--le-side-panel-transition, var(--le-transition-normal))}.host[data-resizing='true'] .panel,.host[data-resizing='true'] .overlayPanelWrap,.host[data-resizing='true'] .inlinePanel{transition:none}@media (prefers-reduced-motion: reduce){.overlayPanelWrap,.overlayRoot,.inlinePanel{transition:none}}`;
-
-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;
-}
-const LeSidePanel$1 = /*@__PURE__*/ proxyCustomElement(class LeSidePanel extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leSidePanelOpenChange = createEvent(this, "leSidePanelOpenChange", 7);
-        this.leSidePanelCollapsedChange = createEvent(this, "leSidePanelCollapsedChange", 7);
-        this.leSidePanelWidthChange = createEvent(this, "leSidePanelWidthChange", 7);
-    }
-    get el() { return this; }
-    /**
-     * Optional id used to match toggle requests.
-     * If set, the panel only responds to toggle events with the same `panelId`.
-     */
-    panelId;
-    /** Which side the panel is attached to. */
-    side = 'start';
-    /** Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. */
-    collapseAt;
-    /** Behavior when in narrow mode. */
-    narrowBehavior = 'overlay';
-    /**
-     * Panel open state for narrow mode.
-     * - overlay: controls modal drawer visibility
-     * - push: controls whether panel is shown (non-modal)
-     */
-    open = false;
-    /** Panel collapsed state for wide mode (fully hidden). */
-    collapsed = false;
-    /** Default panel width in pixels. */
-    panelWidth = 280;
-    /** Minimum allowed width when resizable. */
-    minPanelWidth = 220;
-    /** Maximum allowed width when resizable. */
-    maxPanelWidth = 420;
-    /** Allows users to resize the panel by dragging its edge. */
-    resizable = false;
-    /** When set, panel width + collapsed state are persisted in localStorage. */
-    persistKey;
-    /** Show a close button inside the panel (primarily used in narrow overlay mode). */
-    showCloseButton = true;
-    /** When crossing to wide mode, automatically show the panel (collapsed=false). */
-    autoShowOnWide = true;
-    /** When crossing to narrow mode, automatically hide the panel (open=false). */
-    autoHideOnNarrow = true;
-    /** Accessible label for the panel navigation region. */
-    panelLabel = 'Navigation';
-    leSidePanelOpenChange;
-    leSidePanelCollapsedChange;
-    leSidePanelWidthChange;
-    isNarrow = false;
-    responsiveReady = false;
-    overlayMounted = false;
-    overlayVisible = false;
-    currentWidthPx;
-    resizing = false;
-    resizeObserver;
-    panelEl;
-    overlayWrapEl;
-    focusedBeforeOpen;
-    dragPointerId;
-    dragStartX;
-    dragStartWidth;
-    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, this.minPanelWidth, this.maxPanelWidth);
-            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;
-        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
-            }
-        }
-    }
-    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;
-        }
-    };
-    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;
-        }
-    };
-    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 });
-    };
-    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 });
-    };
-    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 });
-    };
-    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: '692aa465f1a1b8c40ec21d0780eb61d9cebdc6bf', 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: 'a01741c802b6eaa8f70bd9265e0b2a19e5cf29cf', class: {
-                'layout': true,
-                'has-panel': layoutHasInlinePanel,
-                'start': this.side === 'start',
-                'end': this.side === 'end',
-            } }, h("div", { key: '8795da430749e8af45175166a51848ca9c673f06', class: {
-                inlinePanel: true,
-                hidden: !layoutHasInlinePanel,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: '16ed86717a59b27b2bc96ee703b53a74a9963595', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '445b23491194a96bbca4f7c7dc869dc0ba327daa' }))), 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 watchers() { return {
-        "panelWidth": ["onPanelWidthChanged"],
-        "collapsed": ["onCollapsedChanged"],
-        "open": ["onOpenChanged"],
-        "collapseAt": ["onResponsivePropChanged"],
-        "narrowBehavior": ["onResponsivePropChanged"]
-    }; }
-    static get style() { return leSidePanelCss(); }
-}, [769, "le-side-panel", {
-        "panelId": [1, "panel-id"],
-        "side": [1],
-        "collapseAt": [1, "collapse-at"],
-        "narrowBehavior": [1, "narrow-behavior"],
-        "open": [1540],
-        "collapsed": [1540],
-        "panelWidth": [2, "panel-width"],
-        "minPanelWidth": [2, "min-panel-width"],
-        "maxPanelWidth": [2, "max-panel-width"],
-        "resizable": [4],
-        "persistKey": [1, "persist-key"],
-        "showCloseButton": [4, "show-close-button"],
-        "autoShowOnWide": [4, "auto-show-on-wide"],
-        "autoHideOnNarrow": [4, "auto-hide-on-narrow"],
-        "panelLabel": [1, "panel-label"],
-        "isNarrow": [32],
-        "responsiveReady": [32],
-        "overlayMounted": [32],
-        "overlayVisible": [32],
-        "currentWidthPx": [32],
-        "resizing": [32]
-    }, [[6, "keydown", "onDocumentKeyDown"], [4, "leSidePanelRequestToggle", "onToggleRequest"]], {
-        "panelWidth": ["onPanelWidthChanged"],
-        "collapsed": ["onCollapsedChanged"],
-        "open": ["onOpenChanged"],
-        "collapseAt": ["onResponsivePropChanged"],
-        "narrowBehavior": ["onResponsivePropChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-side-panel", "le-button", "le-checkbox", "le-component", "le-icon", "le-popover", "le-popup", "le-select", "le-side-panel-toggle", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-side-panel":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeSidePanel$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-side-panel-toggle":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeSidePanel = LeSidePanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeSidePanel, defineCustomElement };
-//# sourceMappingURL=le-side-panel.js.map
-
-//# sourceMappingURL=le-side-panel.js.map