@sekiui/elements 0.0.59 → 0.0.61

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

@@ -1,118 +1,83 @@
-/**
- * SekiSidebarMenuSub Component
- * @description Nested submenu container for collapsible menu items
- * Provides expandable/collapsible sub-navigation structure with support for:
- * - Multi-level nesting (unlimited depth)
- * - Smooth animations (200ms transitions)
- * - Icon-only display when parent sidebar is collapsed
- * - Tooltip support for collapsed state
- * - Full keyboard navigation and accessibility
- * @component
- * @example
- * <seki-sidebar-menu-item>
- *   <span slot="icon">⚙️</span>
- *   Settings
- *   <seki-sidebar-menu-sub slot="submenu">
- *     <seki-sidebar-menu-item href="/settings/profile">
- *       <span slot="icon">👤</span>
- *       Profile
- *     </seki-sidebar-menu-item>
- *     <seki-sidebar-menu-item href="/settings/security">
- *       <span slot="icon">🔒</span>
- *       Security
- *     </seki-sidebar-menu-item>
- *   </seki-sidebar-menu-sub>
- * </seki-sidebar-menu-item>
- */
 import { h, Host } from "@stencil/core";
 export class SekiSidebarMenuSub {
     constructor() {
         /**
-         * Initial collapsed state
-         * @type {boolean}
-         * @default false
+         * Whether the submenu is open
          */
-        this.defaultCollapsed = false;
-        /**
-         * Internal state: whether submenu is collapsed
-         */
-        this.isCollapsed = false;
-        /**
-         * Toggle collapsed state
-         */
-        this.handleToggle = () => {
-            this.isCollapsed = !this.isCollapsed;
-            this.collapsedChange.emit({ isCollapsed: this.isCollapsed });
-        };
-        /**
-         * Handle keyboard navigation
-         * - Enter: toggle submenu
-         * - ArrowDown: focus next submenu item
-         * - ArrowUp: focus previous submenu item
-         * - Escape: close submenu
-         */
-        this.handleKeyDown = (event) => {
-            const content = this.el.querySelector('.submenu-content');
-            const items = content ? Array.from(content.querySelectorAll('[role="menuitem"], a, button')) : [];
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    this.handleToggle();
-                    break;
-                case 'ArrowDown':
-                    event.preventDefault();
-                    if (!this.isCollapsed && items.length > 0) {
-                        items[0].focus();
-                    }
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    if (!this.isCollapsed && items.length > 0) {
-                        items[items.length - 1].focus();
-                    }
-                    break;
-                case 'Escape':
-                    event.preventDefault();
-                    if (!this.isCollapsed) {
-                        this.isCollapsed = true;
-                        this.collapsedChange.emit({ isCollapsed: true });
-                    }
-                    break;
+        this.open = false;
+        this._open = false;
+        this._isAnimating = false;
+        this._contentHeight = 0;
+        this.handleTriggerClick = () => {
+            this._isAnimating = true;
+            this._open = !this._open;
+            this.open = this._open;
+            this.openChange.emit(this._open);
+            // Update content height for animation
+            if (this.contentRef) {
+                this._contentHeight = this.contentRef.scrollHeight;
             }
+            // Reset animation state after animation completes
+            setTimeout(() => {
+                this._isAnimating = false;
+            }, 200);
         };
     }
-    /**
-     * Component lifecycle: initialize state
-     */
     componentWillLoad() {
-        this.isCollapsed = Boolean(this.defaultCollapsed);
+        this._open = this.open;
     }
-    /**
-     * Get current collapsed state
-     */
-    async isCollapsedState() {
-        return Boolean(this.isCollapsed);
+    openChanged(newValue) {
+        this._open = newValue;
     }
-    /**
-     * Set collapsed state
-     */
-    async setCollapsed(collapsed) {
-        this.isCollapsed = collapsed;
-        this.collapsedChange.emit({ isCollapsed: collapsed });
+    componentDidLoad() {
+        var _a;
+        // Attach click handler to trigger slot
+        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+        if (triggerSlot) {
+            triggerSlot.addEventListener('slotchange', () => {
+                const assigned = triggerSlot.assignedElements();
+                assigned.forEach((el) => {
+                    el.addEventListener('click', this.handleTriggerClick);
+                });
+            });
+        }
+        // Initial height measurement
+        if (this.contentRef && this._open) {
+            this._contentHeight = this.contentRef.scrollHeight;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+        if (triggerSlot) {
+            const assigned = triggerSlot.assignedElements();
+            assigned.forEach((el) => {
+                el.removeEventListener('click', this.handleTriggerClick);
+            });
+        }
     }
-    /**
-     * Render the component
-     */
     render() {
-        const labelText = this.label || 'Submenu';
-        return (h(Host, { key: '1779e6c0bce966ec710bc019ae6ed4067df3d302', "data-collapsed": this.isCollapsed }, h("div", { key: '254328133fd704ab7d93e51cc1a76eb393c00354', class: "submenu-wrapper" }, h("button", { key: '61b3185705e444d6aa53f10dc7357b7f564dfdc9', class: "submenu-trigger", "aria-expanded": !this.isCollapsed, "aria-label": `Toggle ${labelText}`, "aria-controls": "submenu-content", onClick: this.handleToggle, onKeyDown: this.handleKeyDown, type: "button", title: labelText }, h("span", { key: '4ad58cc92ea8287d8811144089ad50c007625c8c', class: "submenu-trigger-label" }, h("slot", { key: '951b2e27a90c1bdcecc3bf1ec056b20085d1f502', name: "icon" })), h("span", { key: '24f5aa65777c565af787cdcfab3b850938c2e028', class: "submenu-trigger-text" }, this.label), h("span", { key: '3409c122f0315c82df9bc838e80838829b9546f0', class: "submenu-trigger-icon", "aria-hidden": "true" }, "\u25B6")), h("div", { key: 'fc369580c63d58790327494c39d29cb714ef4d30', id: "submenu-content", class: "submenu-content", role: "region", "aria-hidden": this.isCollapsed, "aria-label": `${labelText} submenu`, style: {
-                maxHeight: this.isCollapsed ? '0' : 'auto',
-                overflow: this.isCollapsed ? 'hidden' : 'visible',
-            } }, h("ul", { key: 'aca9bc1c8ff43de9fb0c45c86b0b0bca25525940', role: "menu" }, h("slot", { key: '6ccc8c3738fd3232e775d1b61ff5f342435bee18' }))))));
+        const contentStyle = {};
+        if (this._isAnimating) {
+            contentStyle.height = this._open ? `${this._contentHeight}px` : '0';
+        }
+        else if (this._open) {
+            contentStyle.height = 'auto';
+        }
+        else {
+            contentStyle.height = '0';
+        }
+        return (h(Host, { key: 'ebe995dfb8701f57fbdf3e195c75e62f5378542d', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: 'd8a5c92eab93219f395135d8225439fccfdb09cb', class: "sidebar-menu-sub" }, h("div", { key: 'c502ecb6cca63a66ef62705a854c2bf90fb0861c', class: "sidebar-menu-sub-trigger" }, h("slot", { key: 'c99a526839e13e0ffe5d5ea40160f487bf973c8a', name: "trigger" }), h("svg", { key: '37683cc811b9e65c79cfc7ee14f6175ab37ad4c9', class: {
+                'sidebar-menu-sub-chevron': true,
+                'sidebar-menu-sub-chevron--open': this._open,
+            }, 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("path", { key: 'e0acadba2d0eb8ce5076aab8a37699a418408cdf', d: "m9 18 6-6-6-6" }))), h("ul", { key: '4f2ce71d7f7c12fdb763b600f0f97dcd8eda04bc', ref: (el) => (this.contentRef = el), class: {
+                'sidebar-menu-sub-content': true,
+                'sidebar-menu-sub-content--open': this._open,
+                'sidebar-menu-sub-content--animating': this._isAnimating,
+            }, role: "menu", style: contentStyle, "aria-hidden": !this._open }, h("slot", { key: '0696a338731065bc1cf9a8e69e5cf22f853b7c70' })))));
     }
     static get is() { return "seki-sidebar-menu-sub"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-sidebar-menu-sub.css"]
@@ -125,37 +90,9 @@ export class SekiSidebarMenuSub {
     }
     static get properties() {
         return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SidebarMenuSubProps['label']",
-                    "resolved": "string | undefined",
-                    "references": {
-                        "SidebarMenuSubProps": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::SidebarMenuSubProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Label for the submenu (shown when expanded)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "defaultCollapsed": {
+            "open": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -164,93 +101,47 @@ export class SekiSidebarMenuSub {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Initial collapsed state"
+                    "tags": [],
+                    "text": "Whether the submenu is open"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "default-collapsed",
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isCollapsed": {}
+            "_open": {},
+            "_isAnimating": {},
+            "_contentHeight": {}
         };
     }
     static get events() {
         return [{
-                "method": "collapsedChange",
-                "name": "collapsedChange",
+                "method": "openChange",
+                "name": "openChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event fired when collapsed state changes"
+                    "text": "Event emitted when open state changes"
                 },
                 "complexType": {
-                    "original": "CollapsedChangeDetail",
-                    "resolved": "CollapsedChangeDetail",
-                    "references": {
-                        "CollapsedChangeDetail": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/sidebar/types.ts::CollapsedChangeDetail"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 }
             }];
     }
-    static get methods() {
-        return {
-            "isCollapsedState": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Get current collapsed state",
-                    "tags": []
-                }
-            },
-            "setCollapsed": {
-                "complexType": {
-                    "signature": "(collapsed: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "collapsed",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set collapsed state",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
 }