@govbr-ds/webcomponents 2.0.0-next.27 → 2.0.0-next.29

package/dist/components/p-CjwCo_EV.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","Checkbox","__stencil_proxyCustomElement","HTMLElement","elementInternals","indeterminate","checked","customId","checkboxId","disabled","hasHiddenLabel","label","name","state","value","slotDefault","checkedChange","indeterminateChange","updateIndeterminate","newValue","input","this","el","shadowRoot","querySelector","componentWillLoad","hasSlotContentDefault","innerHTML","getCssClassMap","valid","invalid","handleCheckedChange","emit","setIndeterminate","toggleChecked","render","h","Host","key","class","type","id","onChange","ref","htmlFor"],"sources":["../../packages/webcomponents/src/components/checkbox/checkbox.scss?tag=br-checkbox&encapsulation=shadow","../../packages/webcomponents/src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/checkbox/checkbox\";\n\n:host {\n  display: block;\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\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   * Este estado será resetado automaticamente ao clicar no checkbox, alterando para marcado ou desmarcado.\n   */\n  @Prop({ reflect: true, mutable: 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.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-checkbox-${checkboxId++}`\n\n  /**\n   * Desativa o checkbox, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) readonly 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 }) readonly 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 }) readonly 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 }) readonly 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 }) readonly 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 }) readonly value: string\n\n  @State() slotDefault: boolean = false\n\n  /**\n   * Disparado depois que o valor do `checked` foi alterado\n   */\n  @Event() checkedChange: EventEmitter<boolean>\n\n  /**\n   * Disparado depois que o valor do `indeterminate` foi alterado.\n   */\n  @Event() indeterminateChange: EventEmitter<boolean>\n\n  @Watch('indeterminate')\n  updateIndeterminate(newValue: boolean) {\n    const input = this.el.shadowRoot.querySelector('input')\n    if (input !== null) {\n      input.indeterminate = newValue\n    }\n  }\n\n  componentWillLoad() {\n    this.hasSlotContentDefault()\n  }\n\n  private hasSlotContentDefault(): void {\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 readonly handleCheckedChange = () => {\n    if (this.indeterminate) {\n      // Sai do estado indeterminado ao clicar e define como marcado\n      this.indeterminate = false\n      this.checked = true\n      this.indeterminateChange.emit(this.indeterminate)\n    } else {\n      // Alterna entre marcado e desmarcado\n      this.checked = !this.checked\n    }\n    this.checkedChange.emit(this.checked)\n  }\n\n  /**\n   * Define o estado indeterminado do checkbox.\n   * @param value Novo valor para o estado indeterminado.\n   */\n  @Method()\n  async setIndeterminate(value: boolean) {\n    this.indeterminate = value\n    this.updateIndeterminate(value)\n    this.indeterminateChange.emit(this.indeterminate)\n  }\n\n  /**\n   * Inverte o valor da prop `checked`\n   */\n  @Method()\n  async toggleChecked() {\n    this.checked = !this.checked\n    this.checkedChange.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            value={this.value}\n            onChange={this.handleCheckedChange}\n            ref={(el) => el && (el.indeterminate = this.indeterminate)}\n          />\n          <label htmlFor={this.customId}>{this.slotDefault ? <slot></slot> : this.label}</label>\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet checkboxId = 0\n"],"mappings":";;;;;AAAA,MAAMA,IAAc;;MC2BPC,KAAQC,EAAA,MAAAD,UAAAE;;;;;;;;;;;;EAOAC;;;;;;;EAQqBC,cAAyB;;;;;EAMzBC,QAAmB;;;;;EAMzBC,SAAmB,eAAeC;;;;EAKlCC,SAAoB;;;;;EAMpBC,eAA0B;;;;;EAM1BC;;;;;EAMAC;;;;;;;;EASAC;;;;;;EAOAC;EAEzBC,YAAuB;;;;EAKvBC;;;;EAKAC;EAGT,mBAAAC,CAAoBC;IAClB,MAAMC,IAAQC,KAAKC,GAAGC,WAAWC,cAAc;IAC/C,IAAIJ,MAAU,MAAM;MAClBA,EAAMf,gBAAgBc;;;EAI1B,iBAAAM;IACEJ,KAAKK;;EAGC,qBAAAA;IACNL,KAAKN,cAAcM,KAAKC,GAAGK,cAAc;;EAGnC,cAAAC;IACN,OAAO;MACL,eAAe;MACfC,OAAOR,KAAKR,UAAU;MACtBiB,SAAST,KAAKR,UAAU;MACxBJ,UAAUY,KAAKZ;MACf,gBAAgBY,KAAKX;;;EAIRqB,oBAAsB;IACrC,IAAIV,KAAKhB,eAAe;;MAEtBgB,KAAKhB,gBAAgB;MACrBgB,KAAKf,UAAU;MACfe,KAAKJ,oBAAoBe,KAAKX,KAAKhB;WAC9B;;MAELgB,KAAKf,WAAWe,KAAKf;;IAEvBe,KAAKL,cAAcgB,KAAKX,KAAKf;AAAQ;;;;;EAQvC,sBAAM2B,CAAiBnB;IACrBO,KAAKhB,gBAAgBS;IACrBO,KAAKH,oBAAoBJ;IACzBO,KAAKJ,oBAAoBe,KAAKX,KAAKhB;;;;SAOrC,mBAAM6B;IACJb,KAAKf,WAAWe,KAAKf;IACrBe,KAAKL,cAAcgB,KAAKX,KAAKf;;EAG/B,MAAA6B;IACE,OACEC,EAACC,GAAI;MAAAC,KAAA;OACHF,EAAA;MAAAE,KAAA;MAAKC,OAAOlB,KAAKO;OACfQ,EACE;MAAAE,KAAA;MAAAE,MAAK;MACLC,IAAIpB,KAAKd;MACTK,MAAMS,KAAKT;MACXN,SAASe,KAAKf;MACdG,UAAUY,KAAKZ;MACfK,OAAOO,KAAKP;MACZ4B,UAAUrB,KAAKU;MACfY,KAAMrB,KAAOA,MAAOA,EAAGjB,gBAAgBgB,KAAKhB;QAE9C+B,EAAO;MAAAE,KAAA;MAAAM,SAASvB,KAAKd;OAAWc,KAAKN,cAAcqB,EAAa,gBAAGf,KAAKV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOlF,IAAIH,IAAa","ignoreList":[]}