@govbr-ds/webcomponents 2.0.0-next.2 → 2.0.0-next.21

package/dist/collection/components/radio/radio.js

@@ -0,0 +1,247 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { h, Host } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+/**
+ *  Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).
+ *
+ * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.
+ */
+export class Radio {
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * Handler para o event "click"
+         * @param event Objeto Event
+         */
+        this.onClick = (event) => {
+            event.stopPropagation();
+            this.checked = event.target.checked;
+        };
+        /**
+         * Handler para o evento "change"
+         */
+        this.onChange = () => {
+            this.brDidChange.emit({ id: this.customId, name: this.name, value: this.value, checked: this.checked });
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.state = undefined;
+        this.hasHiddenLabel = false;
+        this.name = undefined;
+        this.label = undefined;
+        this.value = undefined;
+        this.customId = `br-input-${uuidv4()}`;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    // Ouvinte para o evento "brDidChange"
+    onBrDidChange(event) {
+        if (event.detail.id !== this.customId && event.detail.name === this.name) {
+            this.checked = false;
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-radio': true,
+            valid: this.state === 'valid',
+            invalid: this.state === 'invalid',
+            disabled: this.disabled,
+            'hidden-label': this.hasHiddenLabel,
+        };
+    }
+    render() {
+        return (h(Host, { key: '3ed11ae0e5323aff8b2704f777edf22bad5def84', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'dc8eae8863c64195594ad5222128901af5abb71f', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'a633acde19c80bbd5a59c5e180b635abb57f8b92', part: "radio-input", "aria-label": this.label, type: "radio", id: this.customId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: this.onClick, onChange: this.onChange }, this.inheritedAttributes)), h("label", { key: '1cc157f04674556b249d210f06e89eb0069964ba', part: "radio-label", htmlFor: this.customId }, h("slot", { key: '3705e625ef30be9265f89cd67fb07c108ff10708' }, this.label)))));
+    }
+    static get is() { return "br-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado de sele\u00E7\u00E3o do radio.\nSe definido como verdadeiro, o radio estar\u00E1 marcado. Caso contr\u00E1rio, estar\u00E1 desmarcado."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o radio, tornando-o n\u00E3o interativo."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'valid' | 'invalid'",
+                    "resolved": "\"invalid\" | \"valid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica a validade do radio.\nValores poss\u00EDveis:\n- 'valid': O radio \u00E9 considerado v\u00E1lido.\n- 'invalid': O radio \u00E9 considerado inv\u00E1lido.\nSe n\u00E3o for especificado, o valor padr\u00E3o \u00E9 `null`, indicando que a validade n\u00E3o foi definida."
+                },
+                "attribute": "state",
+                "reflect": true
+            },
+            "hasHiddenLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o label associado ao radio deve ser oculto.\nSe definido como verdadeiro, o texto do label ser\u00E1 oculto, mas o radio ainda estar\u00E1 vis\u00EDvel e funcional."
+                },
+                "attribute": "has-hidden-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o nome do radio, que \u00E9 utilizado para agrupar radios em formul\u00E1rios e identificar o campo.\nO valor \u00E9 obrigat\u00F3rio e deve ser fornecido para garantir o correto funcionamento em formul\u00E1rios."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto descritivo exibido \u00E0 direita do radio.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade ser\u00E1 ignorado."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor associado ao radio quando ele faz parte de um formul\u00E1rio nativo (`<form>`).\nEsse valor \u00E9 enviado com o formul\u00E1rio quando o radio est\u00E1 selecionado.\n**Nota:** Esta propriedade n\u00E3o deve ser utilizada para determinar se o radio est\u00E1 selecionado; para verificar o estado de sele\u00E7\u00E3o, use a propriedade `checked`."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do input.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "attribute": "id",
+                "reflect": true,
+                "defaultValue": "`br-input-${uuidv4()}`"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidChange",
+                "name": "brDidChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Componente teve seu estado \"checked\" alterado"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "brDidChange",
+                "method": "onBrDidChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=radio.js.map

package/dist/collection/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;GAIG;AAQH,MAAM,OAAO,KAAK;;QAwFR,wBAAmB,GAAe,EAAE,CAAA;QAE5C;;;WAGG;QACc,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAA;QAC3D,CAAC,CAAA;QAED;;WAEG;QACc,aAAQ,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;QACzG,CAAC,CAAA;uBA3F0D,KAAK;wBAKnB,KAAK;;8BAegC,KAAK;;;;wBA0B1B,YAAY,MAAM,EAAE,EAAE;;IAEnF,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAOD,sCAAsC;IAEtC,aAAa,CAAC,KAAkB;QAC9B,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACzE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,IAAI,CAAC,cAAc;SACpC,CAAA;IACH,CAAC;IAoBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAChD,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/B,4EACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,EACtB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACnB,IAAI,CAAC,mBAAmB,EAC5B;gBACF,8DAAO,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ;oBAC9C,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACJ,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *  Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n  tag: 'br-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrRadioElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o estado de seleção do radio.\n   * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n  /**\n   * Desativa o radio, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Indica a validade do radio.\n   * Valores possíveis:\n   * - 'valid': O radio é considerado válido.\n   * - 'invalid': O radio é considerado inválido.\n   * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n   */\n  @Prop({ reflect: true }) state: 'valid' | 'invalid'\n\n  /**\n   * Define se o label associado ao radio deve ser oculto.\n   * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n   */\n  @Prop({ reflect: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n  /**\n   * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n\n  @Prop({ reflect: true }) name!: string\n\n  /**\n   * Texto descritivo exibido à direita do radio.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o radio está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: any\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Componente teve seu estado \"checked\" alterado\n   */\n  @Event({ bubbles: true, composed: true }) brDidChange: EventEmitter\n\n  // Ouvinte para o evento \"brDidChange\"\n  @Listen('brDidChange', { target: 'window' })\n  onBrDidChange(event: CustomEvent) {\n    if (event.detail.id !== this.customId && event.detail.name === this.name) {\n      this.checked = false\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-radio': true,\n      valid: this.state === 'valid',\n      invalid: this.state === 'invalid',\n      disabled: this.disabled,\n      'hidden-label': this.hasHiddenLabel,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Handler para o event \"click\"\n   * @param event Objeto Event\n   */\n  private readonly onClick = (event: MouseEvent) => {\n    event.stopPropagation()\n    this.checked = (event.target as HTMLInputElement).checked\n  }\n\n  /**\n   * Handler para o evento \"change\"\n   */\n  private readonly onChange = () => {\n    this.brDidChange.emit({ id: this.customId, name: this.name, value: this.value, checked: this.checked })\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <div class={this.getCssClassMap()}>\n          <input\n            part=\"radio-input\"\n            aria-label={this.label}\n            type=\"radio\"\n            id={this.customId}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            onClick={this.onClick}\n            onChange={this.onChange}\n            {...this.inheritedAttributes}\n          />\n          <label part=\"radio-label\" htmlFor={this.customId}>\n            <slot>{this.label}</slot>\n          </label>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}