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

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,279 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { Host, h } 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/checkbox?tab=designer).
+ *
+ * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.
+ */
+export class Checkbox {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.handleCheckedChange = (event) => {
+            this.checked = event.target.checked;
+            this.brDidCheckedChange.emit(this.checked);
+        };
+        this.indeterminate = false;
+        this.checked = false;
+        this.customId = `br-input-${uuidv4()}`;
+        this.disabled = false;
+        this.hasHiddenLabel = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.state = undefined;
+        this.value = undefined;
+        this._slotDefault = false;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.hasSlotContentDefault();
+    }
+    hasSlotContentDefault() {
+        this._slotDefault = this.el.innerHTML !== '';
+    }
+    getCssClassMap() {
+        return {
+            'br-checkbox': true,
+            valid: this.state === 'valid',
+            invalid: this.state === 'invalid',
+            disabled: this.disabled,
+            'hidden-label': this.hasHiddenLabel,
+        };
+    }
+    /**
+     * Inverte o valor da prop `checked`
+     */
+    async toggleChecked() {
+        this.checked = !this.checked;
+        this.brDidCheckedChange.emit(this.checked);
+    }
+    render() {
+        return (h(Host, { key: 'a4a2241b6ebf30cb2a443bea2c5d8b0a1b28f2c5' }, h("div", { key: 'b21dda9eee24e48f9c5fbbc85cbb1419f24897f7', class: this.getCssClassMap() }, h("input", Object.assign({ key: '1ebffc2b476181f66f1e5ade165a1b6b087d9040', type: "checkbox", id: this.customId, name: this.name, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, value: this.value, onChange: this.handleCheckedChange }, this.inheritedAttributes)), h("label", { key: '8d2f67677ee74c4ff8a833ba46013286dff25f45', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label))));
+    }
+    static get is() { return "br-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado intermedi\u00E1rio do checkbox.\nSe definido como verdadeiro, o checkbox exibir\u00E1 um estado intermedi\u00E1rio, que \u00E9 um estado visual que indica que a op\u00E7\u00E3o est\u00E1 parcialmente selecionada.\nEste estado \u00E9 \u00FAtil quando o checkbox faz parte de um grupo com sele\u00E7\u00E3o parcial."
+                },
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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 checkbox.\nSe definido como verdadeiro, o checkbox estar\u00E1 marcado. Caso contr\u00E1rio, estar\u00E1 desmarcado."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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()}`"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o checkbox, tornando-o n\u00E3o interativo."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hasHiddenLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o label associado ao checkbox deve ser oculto.\nSe definido como verdadeiro, o texto do label ser\u00E1 oculto, mas o checkbox ainda estar\u00E1 vis\u00EDvel e funcional."
+                },
+                "attribute": "has-hidden-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto descritivo exibido \u00E0 direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade ser\u00E1 ignorado."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o nome do checkbox, que \u00E9 utilizado para agrupar checkboxes 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
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'valid' | 'invalid'",
+                    "resolved": "\"invalid\" | \"valid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica a validade do checkbox.\nValores poss\u00EDveis:\n'valid': O checkbox \u00E9 considerado v\u00E1lido.\n'invalid': O checkbox \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
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor associado ao checkbox quando ele faz parte de um formul\u00E1rio nativo (`<form>`).\nEsse valor \u00E9 enviado com o formul\u00E1rio quando o checkbox est\u00E1 selecionado.\n**Nota:** Esta propriedade n\u00E3o deve ser utilizada para determinar se o checkbox est\u00E1 selecionado; para verificar o estado de sele\u00E7\u00E3o, use a propriedade `checked`."
+                },
+                "attribute": "value",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_slotDefault": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidCheckedChange",
+                "name": "brDidCheckedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disparado depois que o valor do `checked` foi alterado"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleChecked": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inverte o valor da prop `checked`",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACtH,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;;QAwFX,wBAAmB,GAAe,EAAE,CAAA;QAM3B,wBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;YACtD,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAA;YACzD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;6BAnFiD,KAAK;uBAMI,KAAK;wBAMH,YAAY,MAAM,EAAE,EAAE;wBAKtC,KAAK;8BAMC,KAAK;;;;;4BA8BvB,KAAK;;IAEtC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACzD,IAAI,CAAC,qBAAqB,EAAE,CAAA;IAC9B,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,KAAK,EAAE,CAAA;IAC9C,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,aAAa,EAAE,IAAI;YACnB,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;IAaD;;OAEG;IAEH,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/B,4EACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,mBAAmB,IAC9B,IAAI,CAAC,mBAAmB,EAC5B;gBACF,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,eAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAS,CACnF,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } 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/checkbox?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n@Component({\n  tag: 'br-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox {\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: HTMLBrCheckboxElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o estado intermediário do checkbox.\n   * Se definido como verdadeiro, o checkbox exibirá um estado intermediário, que é um estado visual que indica que a opção está parcialmente selecionada.\n   * Este estado é útil quando o checkbox faz parte de um grupo com seleção parcial.\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false\n\n  /**\n   * Define o estado de seleção do checkbox.\n   * Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false\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  /**\n   * Desativa o checkbox, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define se o label associado ao checkbox deve ser oculto.\n   * Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.\n   */\n  @Prop({ reflect: true }) hasHiddenLabel: boolean = false\n\n  /**\n   * Texto descritivo exibido à direita do checkbox.\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 nome do checkbox, que é utilizado para agrupar checkboxes 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  @Prop({ reflect: true }) name!: string\n\n  /**\n   * Indica a validade do checkbox.\n   * Valores possíveis:\n   * 'valid': O checkbox é considerado válido.\n   * 'invalid': O checkbox é 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 o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o checkbox está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: any\n\n  @State() _slotDefault: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n    this.hasSlotContentDefault()\n  }\n\n  private hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-checkbox': 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   * Disparado depois que o valor do `checked` foi alterado\n   */\n  @Event() brDidCheckedChange: EventEmitter<boolean>\n  private readonly handleCheckedChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked\n    this.brDidCheckedChange.emit(this.checked)\n  }\n\n  /**\n   * Inverte o valor da prop `checked`\n   */\n  @Method()\n  async toggleChecked() {\n    this.checked = !this.checked\n    this.brDidCheckedChange.emit(this.checked)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <input\n            type=\"checkbox\"\n            id={this.customId}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            value={this.value}\n            onChange={this.handleCheckedChange}\n            {...this.inheritedAttributes}\n          />\n          <label htmlFor={this.customId}>{this._slotDefault ? <slot></slot> : this.label}</label>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}