@sekiui/elements 0.0.64 → 0.0.69

package/dist/collection/components/command/seki-command-group.js

@@ -0,0 +1,114 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Command group - groups related items with a heading
+ *
+ * @slot - Group items (seki-command-item elements)
+ *
+ * @part group - The group container
+ * @part heading - The group heading
+ */
+export class SekiCommandGroup {
+    constructor() {
+        /**
+         * Show even when all items are filtered out
+         */
+        this.forceMount = false;
+        /**
+         * Whether this group has visible items
+         */
+        this._hasVisibleItems = true;
+        this.headingId = `seki-command-group-heading-${++SekiCommandGroup.instanceCount}`;
+    }
+    /**
+     * Get all items in this group
+     */
+    getItems() {
+        return Array.from(this.el.querySelectorAll('seki-command-item'));
+    }
+    /**
+     * Update visibility based on child items
+     */
+    updateVisibility() {
+        const items = this.getItems();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this._hasVisibleItems = items.some((item) => { var _a, _b; return (_b = (_a = item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item)) !== null && _b !== void 0 ? _b : true; });
+    }
+    componentDidLoad() {
+        const command = this.el.closest('seki-command');
+        if (command) {
+            command.addEventListener('sekiValueChange', () => {
+                // Small delay to allow items to update first
+                requestAnimationFrame(() => this.updateVisibility());
+            });
+        }
+    }
+    render() {
+        const shouldShow = this.forceMount || this._hasVisibleItems;
+        if (!shouldShow) {
+            return h(Host, { style: { display: 'none' } });
+        }
+        return (h(Host, null, h("div", { part: "group", role: "group", class: "command-group", "aria-labelledby": this.headingId }, h("div", { part: "heading", id: this.headingId, class: "command-group-heading" }, this.heading), h("slot", null))));
+    }
+    static get is() { return "seki-command-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-command-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-command-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group header text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "forceMount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show even when all items are filtered out"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "force-mount",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_hasVisibleItems": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+SekiCommandGroup.instanceCount = 0;