@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/menubar/seki-menubar-radio.js

@@ -0,0 +1,134 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Menubar radio item - single-select option
+ *
+ * @slot - Item content
+ *
+ * @part item - The item container
+ * @part indicator - The radio indicator
+ */
+export class SekiMenubarRadio {
+    constructor() {
+        /**
+         * Whether the item is disabled
+         */
+        this.disabled = false;
+        this._isChecked = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.sekiMenubarRadioSelect.emit(this.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    getContext() {
+        const group = this.el.closest('seki-menubar-radio-group');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return group ? group._radioGroupContext : null;
+    }
+    componentWillRender() {
+        const context = this.getContext();
+        this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
+    }
+    componentDidLoad() {
+        const group = this.el.closest('seki-menubar-radio-group');
+        if (group) {
+            group.addEventListener('sekiValueChange', () => {
+                const context = this.getContext();
+                this._isChecked = (context === null || context === void 0 ? void 0 : context.getValue()) === this.value;
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '147db478fd7c9b702f87f3c112f953fc761d779e' }, h("div", { key: '1b198eca40757c40409414b683bee29c5b60a9bd', part: "item", role: "menuitemradio", class: {
+                'menubar-radio': true,
+                'menubar-radio--disabled': this.disabled,
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'bbb6f01c937726520c50ccdab626d5be6abcf77a', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: '8ce93c6b6a280ef19d94b5a4d74f5a4005805ebe', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: 'cdc0f3927d10bf9d0efca11f039fa9f318be0341', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'b0a2acd57e9a4fe0e834a81b77c439433ba1d080' }))));
+    }
+    static get is() { return "seki-menubar-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-menubar-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-menubar-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of this radio item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiMenubarRadioSelect",
+                "name": "sekiMenubarRadioSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when radio is selected"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}