@sekiui/elements 0.0.55 → 0.0.57

package/dist/collection/components/sidebar/seki-sidebar.js

@@ -0,0 +1,812 @@
+/**
+ * SekiSidebar Component
+ * @description Main sidebar container component managing collapse state, layout variant,
+ * and responsive configuration. Provides context to child components.
+ * @component
+ * @example
+ * <seki-sidebar variant="sidebar" collapse-mode="icon" persistent>
+ *   <seki-sidebar-header>Header Content</seki-sidebar-header>
+ *   <seki-sidebar-content>Menu content</seki-sidebar-content>
+ *   <seki-sidebar-footer>Footer content</seki-sidebar-footer>
+ * </seki-sidebar>
+ */
+import { h, Host, } from "@stencil/core";
+import { getKeyboardService } from "../../services/keyboard";
+export class SekiSidebar {
+    constructor() {
+        /**
+         * Layout variant: standard, floating (detached), or inset
+         * @type {'sidebar' | 'floating' | 'inset'}
+         * @default 'sidebar'
+         */
+        this.variant = 'sidebar';
+        /**
+         * Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)
+         * @type {'offcanvas' | 'icon' | 'none'}
+         * @default 'offcanvas'
+         */
+        this.collapseMode = 'offcanvas';
+        /**
+         * Initial open/closed state
+         * @type {boolean}
+         * @default true
+         */
+        this.defaultOpen = true;
+        /**
+         * Persist state to localStorage
+         * @type {boolean}
+         * @default false
+         */
+        this.persistent = false;
+        /**
+         * Viewport width for mobile detection (px)
+         * @type {number}
+         * @default 768
+         */
+        this.mobileBreakpoint = 768;
+        /**
+         * Position: left or right side of viewport
+         * @type {'left' | 'right'}
+         * @default 'left'
+         */
+        this.side = 'left';
+        /**
+         * Storage key for persisted state
+         * @type {string}
+         * @default 'seki-sidebar-state'
+         */
+        this.persistenceKey = 'seki-sidebar-state';
+        /**
+         * Internal state: whether sidebar is open/expanded
+         */
+        this.isOpen = true;
+        /**
+         * Internal state: whether viewport is mobile
+         */
+        this.isMobile = false;
+        /**
+         * Note: Context distribution to child components via parent-child DOM hierarchy
+         * Child components use closest('seki-sidebar') to access parent methods
+         */
+        this.resizeObserver = null;
+        this.mediaQueryList = null;
+        this.keyboardShortcutId = `seki-sidebar-shortcut-${Math.random().toString(36).substr(2, 9)}`;
+        /**
+         * Handle media query changes for mobile detection
+         */
+        this.handleMediaQueryChange = (mq) => {
+            const wasMobile = this.isMobile;
+            this.isMobile = !mq.matches;
+            if (wasMobile !== this.isMobile) {
+                this.mobileStateChange.emit({ isMobile: this.isMobile });
+                // Auto-collapse on mobile if offcanvas mode
+                if (this.isMobile && this.collapseMode === 'offcanvas') {
+                    this.isOpen = false;
+                }
+            }
+        };
+    }
+    /**
+     * Component lifecycle: initialize state
+     */
+    componentWillLoad() {
+        // Load persisted state if available
+        if (this.persistent) {
+            try {
+                const storage = typeof window !== 'undefined' && window.localStorage;
+                if (storage) {
+                    const stored = storage.getItem(this.persistenceKey);
+                    if (stored) {
+                        const state = JSON.parse(stored);
+                        if (typeof state.isOpen === 'boolean') {
+                            this.isOpen = state.isOpen;
+                        }
+                        else {
+                            this.isOpen = Boolean(this.defaultOpen);
+                        }
+                    }
+                    else {
+                        this.isOpen = Boolean(this.defaultOpen);
+                    }
+                }
+                else {
+                    this.isOpen = Boolean(this.defaultOpen);
+                }
+            }
+            catch (e) {
+                console.warn('[seki-sidebar] Failed to load persisted state:', e);
+                this.isOpen = Boolean(this.defaultOpen);
+            }
+        }
+        else {
+            this.isOpen = Boolean(this.defaultOpen);
+        }
+        // Detect initial mobile state
+        this.detectMobileState();
+    }
+    /**
+     * Watch for variant changes
+     */
+    watchVariant(newValue) {
+        if (newValue) {
+            this.variantChange.emit({ variant: newValue });
+        }
+    }
+    /**
+     * Watch for collapse mode changes
+     */
+    watchCollapseMode(newValue) {
+        if (newValue) {
+            this.collapseModeChange.emit({ collapseMode: newValue });
+        }
+    }
+    /**
+     * Component lifecycle: after render
+     */
+    componentDidLoad() {
+        // Setup resize detection for mobile breakpoint
+        this.setupResizeDetection();
+        // Setup keyboard shortcut (Ctrl+B or Cmd+B)
+        this.setupKeyboardShortcut();
+        // Update context with current state
+        this.updateContext();
+    }
+    /**
+     * Component lifecycle: on prop changes
+     */
+    componentWillUpdate() {
+        this.updateContext();
+    }
+    /**
+     * Component lifecycle: cleanup
+     */
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.mediaQueryList) {
+            this.mediaQueryList.removeListener(this.handleMediaQueryChange);
+        }
+        // Clean up keyboard shortcut service
+        getKeyboardService().unregisterShortcut(this.keyboardShortcutId);
+    }
+    /**
+     * Listen for variant prop changes
+     */
+    onVariantChange(newVariant) {
+        this.variantChange.emit({
+            variant: newVariant,
+        });
+    }
+    /**
+     * Listen for collapseMode prop changes
+     */
+    onCollapseModeChange(newMode) {
+        this.collapseModeChange.emit({
+            collapseMode: newMode,
+        });
+    }
+    /**
+     * Detect if viewport is mobile
+     */
+    detectMobileState() {
+        if (typeof window === 'undefined')
+            return;
+        const breakpoint = this.mobileBreakpoint;
+        this.mediaQueryList = window.matchMedia(`(min-width: ${breakpoint}px)`);
+        this.isMobile = !this.mediaQueryList.matches;
+        // Use addEventListener for better browser support
+        if (this.mediaQueryList.addEventListener) {
+            this.mediaQueryList.addEventListener('change', this.handleMediaQueryChange);
+        }
+        else {
+            // Fallback for older browsers
+            this.mediaQueryList.addListener(this.handleMediaQueryChange);
+        }
+    }
+    /**
+     * Setup resize detection using ResizeObserver
+     */
+    setupResizeDetection() {
+        if (typeof window === 'undefined' || !('ResizeObserver' in window))
+            return;
+        const ResizeObserverClass = window.ResizeObserver;
+        this.resizeObserver = new ResizeObserverClass(() => {
+            this.detectMobileState();
+        });
+        const element = this.el;
+        if (element && this.resizeObserver) {
+            this.resizeObserver.observe(element);
+        }
+    }
+    /**
+     * Setup keyboard shortcut for toggling sidebar (Ctrl+B or Cmd+B)
+     * Uses the KeyboardService for centralized event handling
+     */
+    setupKeyboardShortcut() {
+        const keyboardService = getKeyboardService();
+        keyboardService.registerCtrlOrCmdShortcut(this.keyboardShortcutId, 'b', () => this.toggle(), true);
+    }
+    /**
+     * Note: Context updates handled via event emissions and state changes
+     */
+    updateContext() {
+        // State updates trigger reactive re-renders and event emissions
+        // Child components listen to these events
+    }
+    /**
+     * Get current state synchronously
+     */
+    getStateSync() {
+        var _a, _b;
+        return {
+            isOpen: Boolean(this.isOpen),
+            collapseMode: (_a = this.collapseMode) !== null && _a !== void 0 ? _a : 'offcanvas',
+            variant: (_b = this.variant) !== null && _b !== void 0 ? _b : 'sidebar',
+            isMobile: Boolean(this.isMobile),
+            persistenceKey: this.persistenceKey,
+        };
+    }
+    /**
+     * Open the sidebar (set isOpen=true)
+     * @returns {Promise<void>}
+     */
+    async open() {
+        var _a;
+        this.isOpen = true;
+        this.openChange.emit({ isOpen: true });
+        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, true);
+        await this.persistState();
+    }
+    /**
+     * Close the sidebar (set isOpen=false)
+     * @returns {Promise<void>}
+     */
+    async close() {
+        var _a;
+        this.isOpen = false;
+        this.openChange.emit({ isOpen: false });
+        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, false);
+        await this.persistState();
+    }
+    /**
+     * Toggle the sidebar open/closed state
+     * @returns {Promise<void>}
+     */
+    async toggle() {
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
+    }
+    /**
+     * Get current sidebar state
+     * @returns {Promise<SidebarState>}
+     */
+    async getState() {
+        return this.getStateSync();
+    }
+    /**
+     * Update sidebar state
+     * @param {Partial<SidebarState>} state - Partial state object
+     * @returns {Promise<void>}
+     */
+    async setState(state) {
+        var _a;
+        if (state.isOpen !== undefined) {
+            this.isOpen = state.isOpen;
+            this.openChange.emit({ isOpen: state.isOpen });
+        }
+        if (state.collapseMode !== undefined) {
+            this.collapseMode = state.collapseMode;
+            this.collapseModeChange.emit({ collapseMode: state.collapseMode });
+        }
+        if (state.variant !== undefined) {
+            this.variant = state.variant;
+            this.variantChange.emit({ variant: state.variant });
+        }
+        (_a = this.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(this, this.isOpen);
+        await this.persistState();
+    }
+    /**
+     * Persist state to localStorage if persistent=true
+     */
+    async persistState() {
+        if (!this.persistent)
+            return;
+        try {
+            const state = this.getStateSync();
+            const storage = typeof window !== 'undefined' && window.localStorage;
+            if (storage) {
+                storage.setItem(this.persistenceKey, JSON.stringify(state));
+            }
+        }
+        catch (e) {
+            console.warn('[seki-sidebar] Failed to persist state:', e);
+        }
+    }
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: '82055bbf43cae7732545e8e72b2b07b1485cdabc', role: "navigation", "aria-label": "Navigation sidebar", "data-state": this.isOpen ? 'open' : 'closed', "data-variant": this.variant, "data-collapse-mode": this.collapseMode, "data-mobile": this.isMobile }, h("div", { key: 'ea80ee13d88cb2814ea0fdf81174a70e28005a7e', class: "sidebar-container" }, h("div", { key: '990963e11792dec05f7dfc46374fd9495c45d061', class: "sidebar-header" }, h("slot", { key: 'a1383badaa23eaabdedc339b5f3c0fa9006f889b', name: "header" })), h("div", { key: 'a42b588e3975e14d46dc7a0d692625e165d27c27', class: "sidebar-content" }, h("slot", { key: '129065e3f26fb9c05d166e704b65b998de0ff999' })), h("div", { key: 'd88142484a511084430f197c7dc24c7f9a00186f', class: "sidebar-footer" }, h("slot", { key: '756e0971018fc4b9e23f36ed28a4ed45d7742ef2', name: "footer" })))));
+    }
+    static get is() { return "seki-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarProps['variant']",
+                    "resolved": "\"floating\" | \"inset\" | \"sidebar\" | undefined",
+                    "references": {
+                        "SidebarProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'sidebar' | 'floating' | 'inset'}"
+                        }, {
+                            "name": "default",
+                            "text": "'sidebar'"
+                        }],
+                    "text": "Layout variant: standard, floating (detached), or inset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'sidebar'"
+            },
+            "collapseMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarProps['collapseMode']",
+                    "resolved": "\"icon\" | \"none\" | \"offcanvas\" | undefined",
+                    "references": {
+                        "SidebarProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'offcanvas' | 'icon' | 'none'}"
+                        }, {
+                            "name": "default",
+                            "text": "'offcanvas'"
+                        }],
+                    "text": "Collapse mechanism: offcanvas (slides), icon (shrinks), or none (fixed)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-mode",
+                "defaultValue": "'offcanvas'"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Initial open/closed state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "default-open",
+                "defaultValue": "true"
+            },
+            "persistent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Persist state to localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "persistent",
+                "defaultValue": "false"
+            },
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "768"
+                        }],
+                    "text": "Viewport width for mobile detection (px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "768"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarProps['side']",
+                    "resolved": "\"left\" | \"right\" | undefined",
+                    "references": {
+                        "SidebarProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'left' | 'right'}"
+                        }, {
+                            "name": "default",
+                            "text": "'left'"
+                        }],
+                    "text": "Position: left or right side of viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'left'"
+            },
+            "persistenceKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'seki-sidebar-state'"
+                        }],
+                    "text": "Storage key for persisted state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistence-key",
+                "defaultValue": "'seki-sidebar-state'"
+            },
+            "onOpenChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(isOpen: boolean) => void",
+                    "resolved": "((isOpen: boolean) => void) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback fired when open state changes"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when sidebar opens/closes"
+                },
+                "complexType": {
+                    "original": "OpenChangeDetail",
+                    "resolved": "OpenChangeDetail",
+                    "references": {
+                        "OpenChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::OpenChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "variantChange",
+                "name": "variantChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when variant changes"
+                },
+                "complexType": {
+                    "original": "VariantChangeDetail",
+                    "resolved": "VariantChangeDetail",
+                    "references": {
+                        "VariantChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::VariantChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "collapseModeChange",
+                "name": "collapseModeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when collapse mode changes"
+                },
+                "complexType": {
+                    "original": "CollapseModeChangeDetail",
+                    "resolved": "CollapseModeChangeDetail",
+                    "references": {
+                        "CollapseModeChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::CollapseModeChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "mobileStateChange",
+                "name": "mobileStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when mobile state changes"
+                },
+                "complexType": {
+                    "original": "MobileStateChangeDetail",
+                    "resolved": "MobileStateChangeDetail",
+                    "references": {
+                        "MobileStateChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::MobileStateChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the sidebar (set isOpen=true)",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the sidebar (set isOpen=false)",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the sidebar open/closed state",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<SidebarState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SidebarState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarState"
+                        }
+                    },
+                    "return": "Promise<SidebarState>"
+                },
+                "docs": {
+                    "text": "Get current sidebar state",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "setState": {
+                "complexType": {
+                    "signature": "(state: Partial<SidebarState>) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "{ isOpen?: boolean | undefined; collapseMode?: \"offcanvas\" | \"icon\" | \"none\" | undefined; variant?: \"sidebar\" | \"floating\" | \"inset\" | undefined; isMobile?: boolean | undefined; persistenceKey?: string | undefined; }",
+                            "docs": "- Partial state object"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SidebarState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/sidebar/types.ts::SidebarState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update sidebar state",
+                    "tags": [{
+                            "name": "param",
+                            "text": "state - Partial state object"
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "watchVariant"
+            }, {
+                "propName": "collapseMode",
+                "methodName": "watchCollapseMode"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "variant",
+                "method": "onVariantChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "collapseMode",
+                "method": "onCollapseModeChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}