atomicuilibrary 0.0.1

package/dist/collection/components/aside-panel/aside-panel.js

@@ -0,0 +1,1697 @@
+import { h, Host } from "@stencil/core";
+export class AsidePanel {
+    /**
+     * Whether the aside panel is open
+     */
+    open = false;
+    /**
+     * Direction from which the panel slides in: 'left', 'right', 'top', 'bottom'
+     */
+    direction = 'right';
+    /**
+     * Width of the panel (for left/right) or height (for top/bottom)
+     */
+    size = '320px';
+    /**
+     * Enable 'Mini' mode (collapsed into a thin icon-bar)
+     */
+    mini = false;
+    /**
+     * Width/Height of the panel in its 'Mini' state
+     */
+    miniSize = '64px';
+    /**
+     * Prevent closing via overlay or escape (Locked state)
+     */
+    pinned = false;
+    /**
+     * Legacy variant support (maps to theme if set)
+     */
+    variant = 'default';
+    /**
+     * Visual theme: 'default' | 'glass' | 'radiant' | 'zenith'
+     */
+    theme = 'default';
+    /**
+     * Enable auditory haptics (Industrial click sounds)
+     */
+    haptic = false;
+    /**
+     * Enable 3D Parallax tilt effect on content
+     */
+    enableParallax = false;
+    /**
+     * Voice-Activated navigation (Hands-Free)
+     */
+    enableVoiceControl = false;
+    /**
+     * Sync group ID for broadcasting state across instances
+     */
+    syncGroup = '';
+    /**
+     * Scope to a specific container ID (teleports if necessary)
+     */
+    /**
+     * Whether the panel is in 'Maximized' (Full Screen) mode
+     */
+    maximized = false;
+    /**
+     * Whether the panel should automatically enter 'Mini' mode on sm screens
+     */
+    autoMini = true;
+    /**
+     * Global shortcut key to toggle the panel (requires Ctrl key, e.g. 'B')
+     */
+    toggleShortcut = '';
+    /**
+     * Whether to show the 3-dot action menu button in the toolbar
+     */
+    showActions = false;
+    /**
+     * Array of items for the action menu (3-dot)
+     */
+    actionItems = [];
+    /**
+     * Stagger offset for multi-instance layouts (pixels)
+     */
+    stackOffset = 0;
+    scope = 'body';
+    /**
+     * Whether to show the close button
+     */
+    closeable = true;
+    /**
+     * Whether clicking the overlay closes the panel
+     */
+    closeOnOverlayClick = true;
+    /**
+     * Whether to show the background overlay
+     */
+    showOverlay = false;
+    /**
+     * Whether the panel can be closed by pressing Escape key
+     */
+    closeOnEscape = true;
+    /**
+     * Whether the panel is resizable
+     */
+    resizable = false;
+    /**
+     * Color of the resize handle (e.g. '#3bf673')
+     */
+    resizeHandleColor = '';
+    /**
+     * Whether to show a visual indicator on the resize handle
+     */
+    showResizeIndicator = true;
+    /**
+     * Minimum size (width or height) in pixels
+     */
+    minSize = 200;
+    /**
+     * Whether to enable Right-to-Left (RTL) mode
+     */
+    rtl = false;
+    /**
+     * Maximum size (width or height) in pixels
+     */
+    maxSize = 1200;
+    /**
+     * Backdrop blur amount (e.g., '8px')
+     */
+    backdropBlur = '0';
+    /**
+     * Animation transition duration (e.g. '0.3s' or '500ms')
+     */
+    transitionDuration = '1s';
+    /**
+     * Animation style for opening and closing
+     * @default 'slide-in-out'
+     */
+    animationType = 'slide-in-out';
+    /**
+     * Whether the panel is in a loading state
+     */
+    loading = false;
+    /**
+     * Diagnostic progress bar percentage (0-100, -1 to hide)
+     */
+    progress = -1;
+    /**
+     * Status badge label for the header
+     */
+    badge = "";
+    /**
+     * Key to persist the panel's open state and size in localStorage
+     */
+    persistKey;
+    /**
+     * Offset from the screen edge for 'floating' variant (e.g., '20px')
+     */
+    floatingOffset = '20px';
+    /**
+     * Secondary dimension size for 'floating' variant (height if left/right, width if top/bottom)
+     * If 'auto', it stretches to the full viewport minus offsets.
+     */
+    secondarySize = 'auto';
+    /**
+     * Alignment along the secondary axis for 'floating' variant
+     */
+    floatingAlign = 'stretch';
+    /**
+     * Background color of the panel
+     */
+    backgroundColor = 'white';
+    /**
+     * Event emitted when the panel is closed
+     */
+    asideClosed;
+    /**
+     * Event emitted when the panel is opened
+     */
+    asideOpened;
+    /**
+     * Event emitted when the panel is resized
+     */
+    asideResized;
+    /**
+     * Event emitted when the 3-dot action menu is clicked
+     */
+    asideActionClick;
+    /**
+     * Event emitted when the state (open/mini) changes
+     */
+    asideStateChange;
+    currentSize;
+    isResizing = false;
+    isListening = false;
+    mouseRotation = { x: 0, y: 0 };
+    hostElement;
+    startPos = 0;
+    startSize = 0;
+    firstFocusableEl;
+    lastFocusableEl;
+    watchOpenHandler(newValue) {
+        if (newValue) {
+            this.playHaptic('open');
+            this.asideOpened.emit();
+            this.handleFocusTrap();
+            this.saveState();
+            this.broadcastState();
+            if (this.scope === 'body')
+                document.body.classList.add('ui-aside-open');
+        }
+        else {
+            this.playHaptic('close');
+            this.asideClosed.emit();
+            this.saveState();
+            this.broadcastState();
+            if (this.scope === 'body')
+                document.body.classList.remove('ui-aside-open');
+        }
+        this.asideStateChange.emit({ open: this.open, mini: this.mini });
+    }
+    watchMiniHandler() {
+        this.playHaptic('toggle');
+        this.asideStateChange.emit({ open: this.open, mini: this.mini });
+        this.saveState();
+    }
+    handleWindowResize() {
+        if (this.autoMini && window.innerWidth < 1024) {
+            this.mini = true;
+        }
+    }
+    componentWillLoad() {
+        this.loadState();
+        if (!this.currentSize) {
+            this.currentSize = parseInt(this.size);
+        }
+        if (this.autoMini && window.innerWidth < 1024) {
+            this.mini = true;
+        }
+    }
+    handleRemoteSync(ev) {
+        if (!this.syncGroup || ev.detail.group !== this.syncGroup || ev.detail.sourceId === this.hostElement.id)
+            return;
+        this.open = ev.detail.open;
+        this.mini = ev.detail.mini;
+    }
+    broadcastState() {
+        if (!this.syncGroup)
+            return;
+        window.dispatchEvent(new CustomEvent('asideRemoteState', {
+            detail: {
+                group: this.syncGroup,
+                sourceId: this.hostElement.id,
+                open: this.open,
+                mini: this.mini
+            }
+        }));
+    }
+    playHaptic(type) {
+        if (!this.haptic)
+            return;
+        try {
+            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioCtx.createOscillator();
+            const gainNode = audioCtx.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioCtx.destination);
+            const now = audioCtx.currentTime;
+            if (type === 'open') {
+                oscillator.frequency.setValueAtTime(440, now);
+                oscillator.frequency.exponentialRampToValueAtTime(880, now + 0.1);
+            }
+            else if (type === 'close') {
+                oscillator.frequency.setValueAtTime(880, now);
+                oscillator.frequency.exponentialRampToValueAtTime(220, now + 0.15);
+            }
+            else {
+                oscillator.frequency.setValueAtTime(660, now);
+                oscillator.frequency.exponentialRampToValueAtTime(440, now + 0.1);
+            }
+            gainNode.gain.setValueAtTime(0.1, now);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
+            oscillator.start();
+            oscillator.stop(now + 0.15);
+        }
+        catch (e) { /* Audio context fail */ }
+    }
+    disconnectedCallback() {
+        if (this.scope === 'body')
+            document.body.classList.remove('ui-aside-open');
+    }
+    watchSizeHandler(newValue) {
+        if (newValue) {
+            this.currentSize = parseInt(newValue);
+        }
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.handleFocusTrap();
+        }
+    }
+    loadState() {
+        if (this.persistKey) {
+            const saved = localStorage.getItem(`aside-panel-${this.persistKey}`);
+            if (saved) {
+                try {
+                    const { open, mini, size } = JSON.parse(saved);
+                    this.open = open;
+                    this.mini = mini;
+                    this.currentSize = size;
+                }
+                catch (e) {
+                    console.warn('Failed to load aside-panel state', e);
+                }
+            }
+        }
+    }
+    saveState() {
+        if (this.persistKey) {
+            localStorage.setItem(`aside-panel-${this.persistKey}`, JSON.stringify({
+                open: this.open,
+                mini: this.mini,
+                size: this.currentSize
+            }));
+        }
+    }
+    handleFocusTrap() {
+        if (this.open && !this.mini) {
+            setTimeout(() => {
+                const focusableEls = this.hostElement.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
+                if (focusableEls && focusableEls.length > 0) {
+                    this.firstFocusableEl = focusableEls[0];
+                    this.lastFocusableEl = focusableEls[focusableEls.length - 1];
+                    this.firstFocusableEl.focus();
+                }
+            }, 100);
+        }
+    }
+    handleKeyDown(event) {
+        // Global toggle shortcut (e.g. Ctrl + B)
+        if (this.toggleShortcut && event.ctrlKey && event.key.toLowerCase() === this.toggleShortcut.toLowerCase()) {
+            event.preventDefault();
+            this.toggle();
+            return;
+        }
+        if (!this.open)
+            return;
+        if (this.closeOnEscape && event.key === 'Escape' && !this.pinned) {
+            this.handleClose();
+        }
+        // Elite Keyboard Resizing
+        if (this.resizable && event.altKey) {
+            const step = event.shiftKey ? 50 : 10;
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+                event.preventDefault();
+                let delta = 0;
+                if (event.key === 'ArrowLeft')
+                    delta = (this.direction === 'left' ? -step : (this.direction === 'right' ? step : 0));
+                if (event.key === 'ArrowRight')
+                    delta = (this.direction === 'left' ? step : (this.direction === 'right' ? -step : 0));
+                if (event.key === 'ArrowUp')
+                    delta = (this.direction === 'top' ? -step : (this.direction === 'bottom' ? step : 0));
+                if (event.key === 'ArrowDown')
+                    delta = (this.direction === 'top' ? step : (this.direction === 'bottom' ? -step : 0));
+                this.currentSize = Math.max(this.minSize, Math.min(this.maxSize, this.currentSize + delta));
+                this.asideResized.emit({ size: this.currentSize });
+                this.saveState();
+                this.playHaptic('toggle');
+            }
+        }
+        if (event.key === 'Tab') {
+            const shadowRoot = this.hostElement.shadowRoot;
+            const activeEl = shadowRoot ? shadowRoot.activeElement : document.activeElement;
+            if (event.shiftKey) {
+                if (activeEl === this.firstFocusableEl) {
+                    this.lastFocusableEl.focus();
+                    event.preventDefault();
+                }
+            }
+            else {
+                if (activeEl === this.lastFocusableEl) {
+                    this.firstFocusableEl.focus();
+                    event.preventDefault();
+                }
+            }
+        }
+    }
+    /**
+     * Toggle Maximized state
+     */
+    async toggleMaximize() {
+        this.maximized = !this.maximized;
+        this.playHaptic('toggle');
+    }
+    /**
+     * Toggle the panel open/closed
+     */
+    async toggle() {
+        this.open = !this.open;
+    }
+    /**
+     * Toggle Mini state
+     */
+    async toggleMini() {
+        this.mini = !this.mini;
+    }
+    /**
+     * Open the panel
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Close the panel
+     */
+    async hide() {
+        if (this.pinned)
+            return;
+        this.open = false;
+    }
+    async initVoice() {
+        if (!this.enableVoiceControl || !('webkitSpeechRecognition' in window))
+            return;
+        const recognition = new window.webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US';
+        recognition.onstart = () => { this.isListening = true; };
+        recognition.onend = () => { this.isListening = false; };
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            if (command.includes('side') || command.includes('panel')) {
+                if (command.includes('open') || command.includes('show'))
+                    this.show();
+                if (command.includes('close') || command.includes('hide'))
+                    this.hide();
+                if (command.includes('mini') || command.includes('collapse'))
+                    this.mini = true;
+                if (command.includes('expand'))
+                    this.mini = false;
+            }
+        };
+        recognition.start();
+    }
+    handleResizeStart = (e) => {
+        if (!this.resizable || this.mini)
+            return;
+        e.preventDefault();
+        this.isResizing = true;
+        if (this.direction === 'left' || this.direction === 'right') {
+            this.startPos = e.clientX;
+        }
+        else {
+            this.startPos = e.clientY;
+        }
+        this.startSize = this.currentSize;
+        document.addEventListener('mousemove', this.handleResizeMove);
+        document.addEventListener('mouseup', this.handleResizeEnd);
+    };
+    handleResizeMove = (e) => {
+        if (!this.isResizing)
+            return;
+        let delta = 0;
+        let maxViewportSize = 0;
+        if (this.direction === 'left' || this.direction === 'right') {
+            maxViewportSize = window.innerWidth * 0.9;
+            if (this.direction === 'left') {
+                delta = e.clientX - this.startPos;
+            }
+            else {
+                delta = this.startPos - e.clientX;
+            }
+        }
+        else {
+            maxViewportSize = window.innerHeight * 0.9;
+            if (this.direction === 'top') {
+                delta = e.clientY - this.startPos;
+            }
+            else {
+                delta = this.startPos - e.clientY;
+            }
+        }
+        let newSize = this.startSize + delta;
+        const currentMax = Math.min(this.maxSize, maxViewportSize);
+        newSize = Math.max(this.minSize, Math.min(currentMax, newSize));
+        this.currentSize = newSize;
+    };
+    handleResizeEnd = () => {
+        this.isResizing = false;
+        document.removeEventListener('mousemove', this.handleResizeMove);
+        document.removeEventListener('mouseup', this.handleResizeEnd);
+        this.asideResized.emit({ size: this.currentSize });
+        this.saveState();
+    };
+    handleClose = () => {
+        if (this.pinned)
+            return;
+        this.open = false;
+    };
+    handleOverlayClick = () => {
+        if (this.closeOnOverlayClick && !this.pinned) {
+            this.handleClose();
+        }
+    };
+    handleParallax = (e) => {
+        if (!this.enableParallax || !this.open || this.mini)
+            return;
+        const rect = this.hostElement.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width - 0.5;
+        const y = (e.clientY - rect.top) / rect.height - 0.5;
+        this.mouseRotation = { x: y * 5, y: -x * 5 };
+    };
+    resetParallax = () => {
+        this.mouseRotation = { x: 0, y: 0 };
+    };
+    hostStyle() {
+        const styles = {};
+        const sizeValue = this.maximized ? '90%' : (this.mini ? this.miniSize : (this.currentSize ? `${this.currentSize}px` : this.size));
+        const isFloating = this.variant === 'floating';
+        const offset = isFloating ? this.floatingOffset : (this.stackOffset ? `${this.stackOffset}px` : '0');
+        let centerTransform = 'none';
+        if (this.direction === 'left' || this.direction === 'right') {
+            styles.width = sizeValue;
+            styles[this.direction] = offset;
+            if (isFloating) {
+                if (this.floatingAlign === 'stretch') {
+                    styles.top = offset;
+                    styles.bottom = offset;
+                    styles.height = `calc(100vh - 2 * ${offset})`;
+                }
+                else {
+                    styles.height = this.secondarySize === 'auto' ? '60%' : this.secondarySize;
+                    if (this.floatingAlign === 'start') {
+                        styles.top = offset;
+                        styles.bottom = 'auto';
+                    }
+                    else if (this.floatingAlign === 'end') {
+                        styles.bottom = offset;
+                        styles.top = 'auto';
+                    }
+                    else {
+                        // center
+                        styles.top = '50%';
+                        centerTransform = 'translateY(-50%)';
+                    }
+                }
+            }
+            else {
+                styles.height = '100vh';
+                styles.top = '0';
+                styles.bottom = '0';
+            }
+        }
+        else {
+            styles.height = sizeValue;
+            styles[this.direction] = offset;
+            if (isFloating) {
+                if (this.floatingAlign === 'stretch') {
+                    styles.left = offset;
+                    styles.right = offset;
+                    styles.width = `calc(100vw - 2 * ${offset})`;
+                }
+                else {
+                    styles.width = this.secondarySize === 'auto' ? '60%' : this.secondarySize;
+                    if (this.floatingAlign === 'start') {
+                        styles.left = offset;
+                        styles.right = 'auto';
+                    }
+                    else if (this.floatingAlign === 'end') {
+                        styles.right = offset;
+                        styles.left = 'auto';
+                    }
+                    else {
+                        // center
+                        styles.left = '50%';
+                        centerTransform = 'translateX(-50%)';
+                    }
+                }
+            }
+            else {
+                styles.width = '100vw';
+                styles.left = '0';
+                styles.right = '0';
+            }
+        }
+        if (this.enableParallax && !this.mini && !this.maximized) {
+            centerTransform = centerTransform === 'none' ? '' : centerTransform;
+            centerTransform += ` perspective(1000px) rotateX(${this.mouseRotation.x}deg) rotateY(${this.mouseRotation.y}deg)`;
+        }
+        styles['--aside-center-transform'] = centerTransform.trim();
+        styles['--aside-transition-duration'] = this.transitionDuration;
+        styles['--aside-bg'] = this.backgroundColor || 'white';
+        styles.backgroundColor = 'var(--aside-bg, #ffffff)';
+        return styles;
+    }
+    render() {
+        const activeTheme = this.theme !== 'default' ? this.theme : this.variant;
+        return (h(Host, { key: '96228f17ee1f0fab8f11427ee6055f42234418cb', class: {
+                'aside-container': true,
+                'open': this.open,
+                'mini': this.mini,
+                'maximized': this.maximized,
+                [`theme-${activeTheme}`]: true,
+                [`variant-${activeTheme}`]: true,
+                [`dir-${this.direction}`]: true,
+                [`animation-${this.animationType}`]: true,
+                'is-pinned': this.pinned,
+                'rtl': this.rtl
+            }, style: this.hostStyle(), role: "complementary", "aria-expanded": this.open.toString(), "aria-hidden": (!this.open).toString() }, this.showOverlay && !this.mini && (h("div", { key: '5dae19f30e04a7fc18cb0fef62a8319f79296160', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '688ced9dccc2bfe6ee489e8283146f8863044224', class: {
+                'panel': true,
+                [`panel-${this.direction}`]: true,
+                'open': this.open,
+                'mini': this.mini,
+                'resizing': this.isResizing,
+                'loading': this.loading,
+                'parallax-active': this.enableParallax
+            }, style: this.hostStyle(), onMouseMove: this.handleParallax, onMouseLeave: this.resetParallax }, this.loading && (h("div", { key: 'e78d13a733dbd6e9b2949634c8b107cab6225d24', class: "loading-overlay" }, h("div", { key: 'c7db0694fba52bfbc8d6a90440976556a85056c6', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: 'ecc06e0c68c743eff86b12e2bb978369743924d7', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: '28156c16815117726861da00bb93165c174fc1fe', class: "resize-indicator" }, h("span", { key: '6b4e06e9ae3935a5a68dfbd2a51b53b1172fdd0f' }), h("span", { key: '82558b01333dff587f0afd3d723a7e592a757ede' }), h("span", { key: 'c8e3a7ab11462c951e1477b5abcae131e2019129' }))))), h("div", { key: 'ab67f36b3f4dd65dffdb6fd4e12bb09d04fa4d59', class: "panel-header-toolbar" }, h("div", { key: '627055ac7880157e1ccdb43587832fb151800202', class: "toolbar-left" }, this.mini ? (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Expand", onClick: () => this.toggleMini() })) : (h("div", { style: { display: 'flex', gap: '4px' } }, h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Collapse to Mini", onClick: () => this.toggleMini() }), !this.mini && (h("ui-button", { variant: "ghost", size: "sm", icon: this.maximized ? 'minimize' : 'maximize', iconLibrary: "lucide", iconSize: "14px", ariaLabel: this.maximized ? 'Restore' : 'Maximize', onClick: () => this.toggleMaximize() })))), this.enableVoiceControl && (h("ui-button", { key: '67bd0e21f1411391f2ee3bfc9d752ce267012401', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'fa9bad7d620cab7d18cf9234f50f985378b472f5', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: '7688f94038ec6a27423be56b787873631614cdc2', id: "aside-actions-trigger", variant: "ghost", size: "sm", icon: "ellipsis-vertical", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "More Actions", onClick: () => this.asideActionClick.emit() })), this.showActions && (h("ui-context-menu", { key: '32daa2cbf1311059c80058a3ad587946f24b8e59', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: 'a3e70a59b575c0376c151e0c6a1db1553a9dd1e9', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: 'c686337c8755a0375b4c87239bf95d2838f8bd36', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: 'b4c1294140c10f94287ba98fa86f16627c61bb5b', class: "panel-header" }, h("div", { key: 'cd0533b0730d96b11136e68ce6a1e0372885ff4f', class: "header-main" }, h("slot", { key: '687c43c34a171ff4351e8a41778da102826ce2f8', name: "header" }), this.badge && h("span", { key: '830f3cb27cf809029f686bacbd488a6dcbcedad3', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '6c37bd10a8d7bfac71cc7aa619c44b4145400681', class: "header-progress" }, h("div", { key: '07fbdc20712c119f1e345fcd070f2eb33f7380e6', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: '569c75c3b02918bb22d3ffc4322a882267b92bb9', class: "panel-content" }, h("slot", { key: '9255c9b298178ae03bae04acd856d8b528ddf808', name: "content" }), h("slot", { key: '0c071717c63c6baabfd5350cad38f57621989c6c' })), !this.mini && (h("div", { key: 'd2a629a5864e57d917ca7a5a8256125a8a8ec0a4', class: "panel-footer" }, h("slot", { key: '9b79d14c480eefa03ef84e73e5363bca9cd63e6e', name: "footer" }))))));
+    }
+    static get is() { return "ui-aside-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aside-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aside-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the aside panel is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction from which the panel slides in: 'left', 'right', 'top', 'bottom'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'right'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the panel (for left/right) or height (for top/bottom)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'320px'"
+            },
+            "mini": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 'Mini' mode (collapsed into a thin icon-bar)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mini",
+                "defaultValue": "false"
+            },
+            "miniSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width/Height of the panel in its 'Mini' state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mini-size",
+                "defaultValue": "'64px'"
+            },
+            "pinned": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevent closing via overlay or escape (Locked state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pinned",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AsidePanelVariant",
+                    "resolved": "\"default\" | \"floating\" | \"glass\" | \"none\"",
+                    "references": {
+                        "AsidePanelVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AsidePanelVariant",
+                            "referenceLocation": "AsidePanelVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Legacy variant support (maps to theme if set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AsidePanelTheme",
+                    "resolved": "\"default\" | \"glass\" | \"none\" | \"radiant\" | \"zenith\"",
+                    "references": {
+                        "AsidePanelTheme": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AsidePanelTheme",
+                            "referenceLocation": "AsidePanelTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme: 'default' | 'glass' | 'radiant' | 'zenith'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'default'"
+            },
+            "haptic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable auditory haptics (Industrial click sounds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "false"
+            },
+            "enableParallax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 3D Parallax tilt effect on content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-parallax",
+                "defaultValue": "false"
+            },
+            "enableVoiceControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Voice-Activated navigation (Hands-Free)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-voice-control",
+                "defaultValue": "false"
+            },
+            "syncGroup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sync group ID for broadcasting state across instances"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sync-group",
+                "defaultValue": "''"
+            },
+            "maximized": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is in 'Maximized' (Full Screen) mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maximized",
+                "defaultValue": "false"
+            },
+            "autoMini": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel should automatically enter 'Mini' mode on sm screens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-mini",
+                "defaultValue": "true"
+            },
+            "toggleShortcut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Global shortcut key to toggle the panel (requires Ctrl key, e.g. 'B')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-shortcut",
+                "defaultValue": "''"
+            },
+            "showActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the 3-dot action menu button in the toolbar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-actions",
+                "defaultValue": "false"
+            },
+            "actionItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[] | string",
+                    "resolved": "ContextMenuItem[] | string",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../context-menu/types",
+                            "id": "src/components/context-menu/types.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of items for the action menu (3-dot)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-items",
+                "defaultValue": "[]"
+            },
+            "stackOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stagger offset for multi-instance layouts (pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stack-offset",
+                "defaultValue": "0"
+            },
+            "scope": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scope",
+                "defaultValue": "'body'"
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closeable",
+                "defaultValue": "true"
+            },
+            "closeOnOverlayClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking the overlay closes the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-overlay-click",
+                "defaultValue": "true"
+            },
+            "showOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the background overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-overlay",
+                "defaultValue": "false"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel can be closed by pressing Escape key"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is resizable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "resizeHandleColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the resize handle (e.g. '#3bf673')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize-handle-color",
+                "defaultValue": "''"
+            },
+            "showResizeIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a visual indicator on the resize handle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-resize-indicator",
+                "defaultValue": "true"
+            },
+            "minSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum size (width or height) in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-size",
+                "defaultValue": "200"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable Right-to-Left (RTL) mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum size (width or height) in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "1200"
+            },
+            "backdropBlur": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backdrop blur amount (e.g., '8px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-blur",
+                "defaultValue": "'0'"
+            },
+            "transitionDuration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation transition duration (e.g. '0.3s' or '500ms')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transition-duration",
+                "defaultValue": "'1s'"
+            },
+            "animationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationEffect",
+                    "resolved": "\"bounce\" | \"expand\" | \"fade\" | \"fade-down\" | \"fade-in\" | \"fade-in-out\" | \"fade-left\" | \"fade-out\" | \"fade-right\" | \"fade-up\" | \"flip\" | \"flip-x\" | \"flip-y\" | \"float\" | \"none\" | \"pulse\" | \"ripple\" | \"rotate\" | \"scale\" | \"shake\" | \"shimmer\" | \"slide\" | \"slide-down\" | \"slide-in\" | \"slide-in-out\" | \"slide-left\" | \"slide-left-right\" | \"slide-out\" | \"slide-right\" | \"slide-up\" | \"slide-up-down\" | \"spin\" | \"spring\" | \"swing\" | \"wave\" | \"wobble\" | \"zoom\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "AnimationEffect": {
+                            "location": "import",
+                            "path": "../../types/animation.type",
+                            "id": "src/types/animation.type.d.ts::AnimationEffect",
+                            "referenceLocation": "AnimationEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'slide-in-out'"
+                        }],
+                    "text": "Animation style for opening and closing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-type",
+                "defaultValue": "'slide-in-out'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is in a loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diagnostic progress bar percentage (0-100, -1 to hide)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "-1"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status badge label for the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "\"\""
+            },
+            "persistKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Key to persist the panel's open state and size in localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-key"
+            },
+            "floatingOffset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset from the screen edge for 'floating' variant (e.g., '20px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "floating-offset",
+                "defaultValue": "'20px'"
+            },
+            "secondarySize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary dimension size for 'floating' variant (height if left/right, width if top/bottom)\r\nIf 'auto', it stretches to the full viewport minus offsets."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-size",
+                "defaultValue": "'auto'"
+            },
+            "floatingAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlignmentType",
+                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "AlignmentType": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AlignmentType",
+                            "referenceLocation": "AlignmentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment along the secondary axis for 'floating' variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "floating-align",
+                "defaultValue": "'stretch'"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'white'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentSize": {},
+            "isResizing": {},
+            "isListening": {},
+            "mouseRotation": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "asideClosed",
+                "name": "asideClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the panel is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "asideOpened",
+                "name": "asideOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the panel is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "asideResized",
+                "name": "asideResized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the panel is resized"
+                },
+                "complexType": {
+                    "original": "{ size: number }",
+                    "resolved": "{ size: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "asideActionClick",
+                "name": "asideActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the 3-dot action menu is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "asideStateChange",
+                "name": "asideStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the state (open/mini) changes"
+                },
+                "complexType": {
+                    "original": "{ open: boolean; mini: boolean }",
+                    "resolved": "{ open: boolean; mini: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleMaximize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle Maximized state",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the panel open/closed",
+                    "tags": []
+                }
+            },
+            "toggleMini": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle Mini state",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the panel",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the panel",
+                    "tags": []
+                }
+            },
+            "initVoice": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "watchOpenHandler"
+            }, {
+                "propName": "mini",
+                "methodName": "watchMiniHandler"
+            }, {
+                "propName": "size",
+                "methodName": "watchSizeHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "asideRemoteState",
+                "method": "handleRemoteSync",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}