voa-ds-core 1.0.3

package/dist/collection/components/voa-option/voa-option.js

@@ -0,0 +1,222 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente Option do Voa Design System - Radio Button Pattern
+ *
+ * Acts as a standalone radio option that can be used in a radio group.
+ * Manages internal checked state and syncs with Native Form API via ElementInternals.
+ *
+ * @part base - Root container with flex layout
+ * @part indicator - Outer radio circle container
+ * @part indicator-dot - Inner dot (visible when checked)
+ * @part label - Label text wrapper
+ *
+ * CSS Parts allow external styling via ::part() selectors using design tokens.
+ * Supports delegated focus for better accessibility.
+ */
+export class VoaOption {
+    constructor() {
+        /**
+         * Internal state for the checked status.
+         * Synced from the checked prop via @Watch.
+         */
+        this.internalChecked = false;
+        /**
+         * If true, this option is selected.
+         */
+        this.checked = false;
+        /**
+         * If true, this option is disabled.
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            // Radio logic: Clicking toggles the checked state.
+            // In a radio group, parent should uncheck siblings.
+            // For this isolated component, we toggle and emit the event.
+            this.internalChecked = !this.internalChecked;
+            this.checked = this.internalChecked; // Update the prop so it reflects to attribute
+            this.updateFormInternals();
+            this.dsChange.emit(this.value);
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            if (ev.key === ' ' || ev.key === 'Enter') {
+                ev.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+        this.updateFormInternals();
+    }
+    checkedChanged(newValue) {
+        this.internalChecked = newValue;
+        this.updateFormInternals();
+    }
+    /**
+     * Syncs with Native Form API
+     */
+    updateFormInternals() {
+        this.internals.setFormValue(this.internalChecked ? this.value : null);
+        this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';
+        this.internals.ariaDisabled = this.disabled ? 'true' : 'false';
+    }
+    render() {
+        return (h(Host, { key: 'a49a02f2159f3bce112f07df847a4101006795f5', onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0 }, h("div", { key: '5efdd0734068fe0965061b87021ff2348617c147', part: "base", class: {
+                'option-container': true,
+                'option-disabled': this.disabled,
+                'option-checked': this.internalChecked,
+                'option-no-label': !this.label
+            } }, h("div", { key: '1c2180ab31d85b38cdf053cc190a4294a499439d', part: "indicator", class: "option-indicator" }, h("div", { key: 'f1b60c9e4ecc2d9fd55b3c725dbd9d6eb03b6ed4', part: "indicator-dot", class: "option-indicator-dot" })), this.label && (h("span", { key: 'e9d593927bb1a5eed33e304a5b789e82e6a4558a', part: "label", class: "option-label" }, this.label, h("slot", { key: '19ddb8536fb451c3a0fced8042ac018029b517be' }))))));
+    }
+    static get is() { return "voa-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-option.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, this option is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed next to the radio indicator.\r\nIf not provided, only the indicator is shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute for the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value returned when this option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects this option."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=voa-option.js.map

package/dist/collection/components/voa-option/voa-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-option.js","sourceRoot":"","sources":["../../../src/components/voa-option/voa-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n/**\r\n * Componente Option do Voa Design System - Radio Button Pattern\r\n * \r\n * Acts as a standalone radio option that can be used in a radio group.\r\n * Manages internal checked state and syncs with Native Form API via ElementInternals.\r\n * \r\n * @part base - Root container with flex layout\r\n * @part indicator - Outer radio circle container\r\n * @part indicator-dot - Inner dot (visible when checked)\r\n * @part label - Label text wrapper\r\n * \r\n * CSS Parts allow external styling via ::part() selectors using design tokens.\r\n * Supports delegated focus for better accessibility.\r\n */\r\n@Component({\r\n  tag: 'voa-option',\r\n  styleUrl: 'voa-option.css',\r\n  shadow: {\r\n    delegatesFocus: true\r\n  },\r\n  formAssociated: true\r\n})\r\nexport class VoaOption {\r\n  @Element() host: HTMLVoaOptionElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state for the checked status.\r\n   * Synced from the checked prop via @Watch.\r\n   */\r\n  @State() internalChecked: boolean = false;\r\n\r\n  /**\r\n   * If true, this option is selected.\r\n   */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * If true, this option is disabled.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * The label text displayed next to the radio indicator.\r\n   * If not provided, only the indicator is shown.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * The name attribute for the radio group.\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * The value returned when this option is selected.\r\n   */\r\n  @Prop() value: string;\r\n\r\n  /**\r\n   * Emitted when the user selects this option.\r\n   */\r\n  @Event() dsChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  @Watch('checked')\r\n  checkedChanged(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Syncs with Native Form API\r\n   */\r\n  private updateFormInternals() {\r\n    this.internals.setFormValue(this.internalChecked ? this.value : null);\r\n    this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';\r\n    this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n  }\r\n\r\n  private handleClick = () => {\r\n    if (this.disabled) return;\r\n\r\n    // Radio logic: Clicking toggles the checked state.\r\n    // In a radio group, parent should uncheck siblings.\r\n    // For this isolated component, we toggle and emit the event.\r\n    this.internalChecked = !this.internalChecked;\r\n    this.checked = this.internalChecked; // Update the prop so it reflects to attribute\r\n    this.updateFormInternals();\r\n    this.dsChange.emit(this.value);\r\n  };\r\n\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n    if (ev.key === ' ' || ev.key === 'Enter') {\r\n      ev.preventDefault();\r\n      this.handleClick();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={this.disabled ? -1 : 0}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'option-container': true,\r\n            'option-disabled': this.disabled,\r\n            'option-checked': this.internalChecked,\r\n            'option-no-label': !this.label\r\n          }}\r\n        >\r\n          {/* visual radio indicator */}\r\n          <div part=\"indicator\" class=\"option-indicator\">\r\n            <div part=\"indicator-dot\" class=\"option-indicator-dot\"></div>\r\n          </div>\r\n\r\n          {/* Label Wrapper */}\r\n          {this.label && (\r\n            <span part=\"label\" class=\"option-label\">\r\n              {this.label}\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}