@sekiui/elements 0.0.59 → 0.0.61

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

@@ -1,85 +1,36 @@
-/**
- * SekiSidebarTrigger Component
- * @description Toggle button for opening/closing the sidebar
- * Manages focus, keyboard activation (Space, Enter), and ARIA attributes
- * @component
- * @example
- * <seki-sidebar-trigger aria-label="Toggle sidebar"></seki-sidebar-trigger>
- */
 import { h, Host } from "@stencil/core";
 export class SekiSidebarTrigger {
     constructor() {
         /**
-         * Accessibility label for the button
-         * @type {string}
-         * @default 'Toggle sidebar'
-         */
-        this.ariaLabel = 'Toggle sidebar';
-        /**
-         * Track the sidebar's open state for aria-expanded attribute
-         */
-        this.isOpen = true;
-        /**
-         * Reference to parent sidebar
-         */
-        this.parentSidebar = null;
-        /**
-         * Handle button click - finds parent seki-sidebar or nearest sidebar in document
+         * Whether the trigger is disabled
          */
+        this.disabled = false;
+        this._isOpen = true;
+        this._isMobile = false;
+        this.provider = null;
         this.handleClick = async () => {
-            // First try to find parent sidebar
-            let sidebar = this.parentSidebar;
-            // If no parent found, look for nearest sidebar in the document
-            if (!sidebar) {
-                sidebar = document.querySelector('seki-sidebar');
-                this.parentSidebar = sidebar;
-            }
-            if (!sidebar)
-                return;
-            const state = await sidebar.getState();
-            await sidebar.setState({ isOpen: !state.isOpen });
-        };
-        /**
-         * Handle keyboard activation (Space, Enter)
-         */
-        this.handleKeyDown = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                e.preventDefault();
-                this.handleClick();
+            if (this.provider && !this.disabled) {
+                await this.provider.toggleSidebar();
             }
         };
     }
-    /**
-     * Initialize - find parent sidebar and listen to state changes
-     */
-    connectedCallback() {
-        var _a, _b;
-        this.parentSidebar = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('seki-sidebar');
-        if (!this.parentSidebar) {
-            this.parentSidebar = document.querySelector('seki-sidebar');
-        }
-        // Get initial state from parent sidebar
-        if (this.parentSidebar) {
-            const sidebarEl = this.parentSidebar;
-            (_b = sidebarEl.getState) === null || _b === void 0 ? void 0 : _b.call(sidebarEl).then(state => {
-                this.isOpen = state.isOpen;
-            });
-        }
+    componentWillLoad() {
+        this.provider = document.querySelector('seki-sidebar-provider');
+        this.syncWithProvider();
     }
-    /**
-     * Listen to openChange event from parent sidebar
-     */
-    handleOpenChange(event) {
-        // Update local state when parent sidebar changes
-        if (event.detail && typeof event.detail.isOpen === 'boolean') {
-            this.isOpen = event.detail.isOpen;
+    async syncWithProvider() {
+        if (this.provider) {
+            const state = await this.provider.getState();
+            this._isOpen = state.isMobile ? state.openMobile : state.open;
+            this._isMobile = state.isMobile;
         }
     }
-    /**
-     * Render the component
-     */
+    handleStateChange(event) {
+        this._isOpen = event.detail.isMobile ? event.detail.openMobile : event.detail.open;
+        this._isMobile = event.detail.isMobile;
+    }
     render() {
-        return (h(Host, { key: 'f031872df0db62782e7736739a4ec21890bedb5a' }, h("button", { key: 'f673e56848c712deca471b9b28c7f52ba346f809', class: "trigger-button", "aria-expanded": this.isOpen, "aria-label": this.ariaLabel, onClick: this.handleClick, onKeyDown: this.handleKeyDown, type: "button" }, this.icon && h("span", { key: '17a389fc5025ce39e9c7e7ac4711efa7bc8477ee', class: "trigger-icon", innerHTML: this.icon }), !this.icon && h("span", { key: 'a2e7692e62bc23ee325d2f3e02bf34a2900d1873', class: "trigger-icon-default" }, "\u2630"))));
+        return (h(Host, { key: '7751e2bcd4f7abd08a23a8e6ed1d28c5afa52236' }, h("button", { key: '12393157e2b598cc27e0a24885245ee27a3c6131', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: '224abf5dda64001fa6b88c9261ebe67f45a5677d' }, h("svg", { key: 'f1057ac8f1c87eef4d96dbfb6c60a437dac1a16c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '5b988659b789aaeae2c3f518bad01506bf9c5a8d', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '1b4a03f0f9a67b8050d1e1721d9751b1e7e287aa', d: "M9 3v18" }))), h("span", { key: '12a56721a022b47997b9db375a6bfb7ddaab8c92', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
     }
     static get is() { return "seki-sidebar-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -95,79 +46,40 @@ export class SekiSidebarTrigger {
     }
     static get properties() {
         return {
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarTriggerProps['ariaLabel']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarTriggerProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarTriggerProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }, {
-                            "name": "default",
-                            "text": "'Toggle sidebar'"
-                        }],
-                    "text": "Accessibility label for the button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "'Toggle sidebar'"
-            },
-            "icon": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "SidebarTriggerProps['icon']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarTriggerProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarTriggerProps"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Icon name or SVG path (optional)"
+                    "tags": [],
+                    "text": "Whether the trigger is disabled"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {}
+            "_isOpen": {},
+            "_isMobile": {}
         };
     }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "openChange",
-                "method": "handleOpenChange",
-                "target": "body",
+                "name": "sekiSidebarStateChange",
+                "method": "handleStateChange",
+                "target": "window",
                 "capture": false,
                 "passive": false
             }];