@sekiui/elements 0.0.59 → 0.0.60

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

@@ -0,0 +1,399 @@
+import { h, Host } from "@stencil/core";
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+const SIDEBAR_MOBILE_BREAKPOINT = 768;
+export class SekiSidebarProvider {
+    constructor() {
+        /**
+         * Default open state
+         */
+        this.defaultOpen = true;
+        /**
+         * Sidebar width when expanded
+         */
+        this.sidebarWidth = '16rem';
+        /**
+         * Sidebar width in icon mode
+         */
+        this.sidebarWidthIcon = '3rem';
+        /**
+         * Sidebar width on mobile
+         */
+        this.sidebarWidthMobile = '18rem';
+        this._open = true;
+        this._openMobile = false;
+        this._isMobile = false;
+        this.handleMediaChange = (e) => {
+            this._isMobile = e.matches;
+            // Close mobile sidebar when switching to desktop
+            if (!e.matches) {
+                this._openMobile = false;
+            }
+            this.emitStateChange();
+        };
+    }
+    componentWillLoad() {
+        // Set up mobile detection
+        if (typeof window !== 'undefined') {
+            this.mediaQuery = window.matchMedia(`(max-width: ${SIDEBAR_MOBILE_BREAKPOINT}px)`);
+            this._isMobile = this.mediaQuery.matches;
+            this.mediaQuery.addEventListener('change', this.handleMediaChange);
+        }
+        // Check cookie for persisted state
+        if (this.open === undefined) {
+            const cookie = this.getCookie(SIDEBAR_COOKIE_NAME);
+            if (cookie !== null) {
+                this._open = cookie === 'true';
+            }
+            else {
+                this._open = this.defaultOpen;
+            }
+        }
+        else {
+            this._open = this.open;
+        }
+    }
+    disconnectedCallback() {
+        if (this.mediaQuery) {
+            this.mediaQuery.removeEventListener('change', this.handleMediaChange);
+        }
+    }
+    openChanged(newValue) {
+        if (newValue !== undefined) {
+            this._open = newValue;
+            this.emitStateChange();
+        }
+    }
+    internalOpenChanged() {
+        this.emitStateChange();
+    }
+    mobileOpenChanged() {
+        this.emitStateChange();
+    }
+    emitStateChange() {
+        this.sekiSidebarStateChange.emit({
+            open: this._open,
+            openMobile: this._openMobile,
+            isMobile: this._isMobile,
+        });
+    }
+    async setOpen(value) {
+        const openState = typeof value === 'function' ? value(this._open) : value;
+        if (this.open !== undefined) {
+            this.openChange.emit(openState);
+        }
+        else {
+            this._open = openState;
+            this.openChange.emit(openState);
+            // Set cookie to persist state
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        }
+    }
+    async setOpenMobile(value) {
+        this._openMobile = value;
+    }
+    async toggleSidebar() {
+        if (this._isMobile) {
+            this._openMobile = !this._openMobile;
+        }
+        else {
+            await this.setOpen(!this._open);
+        }
+    }
+    async getState() {
+        return {
+            open: this._open,
+            openMobile: this._openMobile,
+            isMobile: this._isMobile,
+        };
+    }
+    handleKeyDown(event) {
+        if ((event.metaKey || event.ctrlKey) &&
+            event.key.toLowerCase() === 'b') {
+            event.preventDefault();
+            this.toggleSidebar();
+        }
+    }
+    getCookie(name) {
+        var _a;
+        if (typeof document === 'undefined')
+            return null;
+        const value = `; ${document.cookie}`;
+        const parts = value.split(`; ${name}=`);
+        if (parts.length === 2) {
+            return ((_a = parts.pop()) === null || _a === void 0 ? void 0 : _a.split(';').shift()) || null;
+        }
+        return null;
+    }
+    render() {
+        const style = {
+            '--sidebar-width': this.sidebarWidth,
+            '--sidebar-width-icon': this.sidebarWidthIcon,
+            '--sidebar-width-mobile': this.sidebarWidthMobile,
+        };
+        return (h(Host, { key: '0fe7310c1351a8bda63ee2b3ac8ced3ec73029a0', "data-state": this._open ? 'open' : 'closed', "data-mobile": this._isMobile ? 'true' : 'false', "data-mobile-open": this._openMobile ? 'true' : 'false', style: style }, h("slot", { key: 'f9fc19860aee46eb2cb841a77133ea8b16701481' })));
+    }
+    static get is() { return "seki-sidebar-provider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-provider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-provider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default open state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open"
+            },
+            "sidebarWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar width when expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-width",
+                "defaultValue": "'16rem'"
+            },
+            "sidebarWidthIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar width in icon mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-width-icon",
+                "defaultValue": "'3rem'"
+            },
+            "sidebarWidthMobile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar width on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-width-mobile",
+                "defaultValue": "'18rem'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_open": {},
+            "_openMobile": {},
+            "_isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when open state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiSidebarStateChange",
+                "name": "sekiSidebarStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when sidebar state changes (for child components)"
+                },
+                "complexType": {
+                    "original": "SidebarStateChangeDetail",
+                    "resolved": "SidebarStateChangeDetail",
+                    "references": {
+                        "SidebarStateChangeDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/sidebar/seki-sidebar-provider.tsx",
+                            "id": "src/components/sidebar/seki-sidebar-provider.tsx::SidebarStateChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setOpen": {
+                "complexType": {
+                    "signature": "(value: boolean | ((value: boolean) => boolean)) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean | ((value: boolean) => boolean)",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setOpenMobile": {
+                "complexType": {
+                    "signature": "(value: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<{ open: boolean; openMobile: boolean; isMobile: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ open: boolean; openMobile: boolean; isMobile: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
+                "propName": "_open",
+                "methodName": "internalOpenChanged"
+            }, {
+                "propName": "_openMobile",
+                "methodName": "mobileOpenChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}